我从另一个问题中抓住了这个片段:
<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;}
答案 0 :(得分:8)
您实际上可以大大简化您的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将执行以下操作:
答案 1 :(得分:1)
@wsanville
双击相同标签的问题怎么样?
如果我在选项卡上单击时从选项卡中删除底部边框(表示选中的一个),那很好。但是,当我再次点击它时,它应该保持这样(没有底部边框),但由于切换现在看起来你没有选择标签,但你仍然在那里。
答案 2 :(得分:0)
使用CSS可以实现您的目标:
ul li a {background-color: white;}
ul li a:hover {background-color: black;}
ul li a:focus {background-color: black;}