javascript 如何突出显示选定的选项卡？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26512658/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to highlight the selected tab?
提问by chidori
I have a set of tabs in html which I want to highlight when selected. I am trying to use jquery to do this. But it does not seem to work.
我有一组 html 标签，我想在选择时突出显示。我正在尝试使用 jquery 来做到这一点。但它似乎不起作用。
$(function () {
setNavigation();
});
function setNavigation() {
var path = window.location.pathname;
path = path.replace(/\/$/, "");
path = decodeURIComponent(path);
$(".nav a").each(function () {
var href = $(this).attr('href');
if (path.substring(0, href.length) === href) {
$(this).closest('li').addClass('active');
}
});
}a {
color:#000;
text-decoration:none;
}
a:hover {
text-decoration:underline;
}
a:visited {
color:#000;
}
.nav {
padding:10px;
border:solid 1px #c0c0c0;
border-radius:5px;
float:left;
}
.nav li {
list-style-type:none;
float:left;
margin:0 10px;
}
.nav li a {
text-align:center;
width:55px;
float:left;
}
.nav li.active {
background-color:green;
}
.nav li.active a {
color:#fff;
font-weight:bold;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul class="nav">
<li><a href="#tab1">tab1</a>
</li>
<li>|</li>
<li><a href="#tab2">tab2</a>
</li>
<li>|</li>
<li><a href="#tab3">tab3</a>
</li>
<li>|</li>
<li><a href="#tab4">tab4</a>
</li>
</ul>采纳答案by just some guy
That is doable with a on click event:
这是可行的点击事件：
$(document).on("click", 'ul li', function(){
$('ul li').removeClass('active');
$(this).addClass('active');
});a {
color:#000;
text-decoration:none;
}
a:hover {
text-decoration:underline;
}
a:visited {
color:#000;
}
.nav {
padding:10px;
border:solid 1px #c0c0c0;
border-radius:5px;
float:left;
}
.nav li {
list-style-type:none;
float:left;
margin:0 10px;
}
.nav li a {
text-align:center;
width:55px;
float:left;
}
.nav li.active {
background-color:green;
}
.nav li.active a {
color:#fff;
font-weight:bold;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul class="nav">
<li><a href="#tab1">tab1</a>
</li>
<li>|</li>
<li><a href="#tab2">tab2</a>
</li>
<li>|</li>
<li><a href="#tab3">tab3</a>
</li>
<li>|</li>
<li><a href="#tab4">tab4</a>
</li>
</ul>回答by just some guy
Add an operator class which defines which tab is active/clicked.
添加定义哪个选项卡处于活动/单击状态的运算符类。
HTML
HTML
<ul class="nav">
<li><a href="#tab1" class="active">tab1</a>
</li>
<li>|</li>
<li><a href="#tab2">tab2</a>
</li>
<li>|</li>
<li><a href="#tab3">tab3</a>
</li>
<li>|</li>
<li><a href="#tab4">tab4</a>
</li>
</ul>
Style it in CSS then do a click event in your Javascript/jQuery that looks like follows:
在 CSS 中设置样式，然后在您的 Javascript/jQuery 中执行一个单击事件，如下所示：
$(document).ready(function(){
$(".nav").on("click", "li", function(){
$(".active").removeClass("active");
$(this).addClass("active");
})
})
回答by STW
This is all the jQuery/javascript you need:
这是您需要的所有 jQuery/javascript：
$('.nav a').click(function() { // Hook up to the click event on your .nav anchors
$('.nav li').removeClass('active'); // Clear any existing active <li>'s
$(this).parent().addClass('active'); // Apply the active class to the <li> parent of the clicked <a>
});
回答by AD SINGH Thakur
$(function () {
setNavigation();
});
function setNavigation() {
var path = window.location.pathname;
path = path.replace(/\/$/, "");
path = decodeURIComponent(path);
$(".nav a").each(function () {
var href = $(this).attr('href');
if (path.substring(0, href.length) === href) {
$(this).closest('li').addClass('active');
}
});
}a {
color:#000;
text-decoration:none;
}
a:hover {
text-decoration:underline;
}
a:visited {
color:#000;
}
.nav {
padding:10px;
border:solid 1px #c0c0c0;
border-radius:5px;
float:left;
}
.nav li {
list-style-type:none;
float:left;
margin:0 10px;
}
.nav li a {
text-align:center;
width:55px;
float:left;
}
.nav li.active {
background-color:green;
}
.nav li.active a {
color:#fff;
font-weight:bold;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul class="nav">
<li><a href="#tab1">tab1</a>
</li>
<li>|</li>
<li><a href="#tab2">tab2</a>
</li>
<li>|</li>
<li><a href="#tab3">tab3</a>
</li>
<li>|</li>
<li><a href="#tab4">tab4</a>
</li>
</ul>回答by jroot
This is pretty much the same as another (just some guy, I would have just added a comment, but I have no reputation points. Negative in fact), but a little more specific to the .nav class, so you're not adding events to all ul li elements, but only to the ones under your .nav class.
这与另一个几乎相同（只是某个人，我只是添加了评论，但我没有声誉点。实际上是负面的），但更具体到 .nav 类，所以你没有添加事件到所有 ul li 元素，但仅限于 .nav 类下的元素。
You could also do with with on, if your tabs are anything more than static...
如果您的选项卡不仅仅是静态的，您也可以使用 on...
$(".nav li a").click(function() {
$(".nav li").removeClass("active");
$(this).parent().addClass("active");
});
回答by IVIajid
html:
html：
<ul class="nav">
<li><a onclick="add_select(this);" href="#tab1">tab1</a>
</li>
<li>|</li>
<li><a onclick="add_select(this);" href="#tab2">tab2</a>
</li>
<li>|</li>
<li><a onclick="add_select(this);" href="#tab3">tab3</a>
</li>
<li>|</li>
<li><a onclick="add_select(this);" href="#tab4">tab4</a>
</li>
</ul>
jquery:
查询：
function add_select(selected_nav){
$("ul#nav li a").removeClass("active");
$(selected_nav).addClass("active");
}
