我从另一个问题中抓住了这个片段：
<script type='text/javascript' >
$(document).ready(function () {
$("div.content ul li a")
.mouSEOver(function () {
var t = $(this);
if (!t.hasClass("clicked")) { // very easy to check if element has a set of styles
t.addClass('mouSEOver');
}
})
.mouSEOut(function () { // attach event here instead of inside mouse over
$(this).removeClass('mouSEOver');
});
$("div.content ul li a").click(function () {
var t = $(this);
t.toggleClass("clicked");
if (t.hasClass("clicked")) {
t.removeClass('mouSEOver');
} else {
t.addClass('mouSEOver');
}
});
});
</script>
我想要的最后一件事是在单击另一个选项卡时恢复标签正常css.
例如,当我点击tab1时,标签的bgcolors为白色.当我进入Tab2时,它变为黑色.Tab1变为白色,Tab2变为黑色
<ul> <li> <a href="#Tab1">Tab 1</a> </li> <li> <a href="#Tab2">Tab 2</a> </li> </ul>
让我们说这是CSS部分
ul li a {background-color: white;}
ul li a.mouSEOver {background-color: black;}
ul li a.mouSEOut {background-olor: white;}
ul li a.clicked {background-color: black;}
解决方法
实际上,你可以大大简化你的Javascript.这应该达到你想要的效果.
<script type="text/javascript">
$(document).ready(function() {
$("div.content ul li a")
.mouSEOver(function() {
$(this).addClass('mouSEOver');
})
.mouSEOut(function() {
$(this).removeClass('mouSEOver');
});
$("div.content ul li a").click(function(e) {
e.preventDefault(); //prevent the link from actually navigating somewhere
$(this).toggleClass("clicked");
$("div.content ul li a").not(this).removeClass("clicked"); //remove the clicked class from all other elements
});
});
</script>
这里的Javascript将执行以下操作：
>悬停链接时添加“鼠标悬停”类>当您不再悬停链接时,删除“mouSEOver”类>当您单击某个链接时,它将切换“已点击”类并将其从可能具有该类的任何其他链接中删除 – 这会将其他标签恢复为“正常”状态.
