更改所选菜单选项卡的颜色 [英] change color of selected menu tab
本文介绍了更改所选菜单选项卡的颜色的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我从另一个问题中抓取了此片段:
I grabbed this snippet from another question:
<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变为黑色。
The last thing I wanted is to restore the tabs normal css when another tab is clicked. For example, the tab's bgcolors are white when I click tab1 it becomes black when I go into Tab2..Tab1 goes white and Tab2 goes black
<ul>
<li>
<a href="#Tab1">Tab 1</a>
</li>
<li>
<a href="#Tab2">Tab 2</a>
</li>
</ul>
让我们说这里是CSS部分
let's say here's the CSS part
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。这将达到您想要的效果。
You can actually greatly simplify your Javascript for this. This should achieve your desired effect.
<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将执行以下操作:
The Javascript here will do the following:
- 在悬停链接时添加mouseover类
- 当您不再悬停链接时,删除mouseover类
- 当您点击某个链接时,它会切换已点击类别,并将该类别从可能拥有该类别的任何其他链接中移除 - 这会将其他标签恢复为正常状态。
这篇关于更改所选菜单选项卡的颜色的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文