使用 jquery 突出显示活动菜单项
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25316889/
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
Highlight active menu item using jquery
提问by krubkiewicz
I am having troubles highlighting my active menu items. I am using CSS for hover but what I understand from other posts is that a:active doesn't work with CSS?
我无法突出显示我的活动菜单项。我正在使用 CSS 进行悬停，但我从其他帖子中了解到 a:active 不适用于 CSS？
This is what I have so done so far:
这是我到目前为止所做的：
HTML
HTML
<section id="nav">
<li><a class="nav" href="editorial.html">EDITORIAL</a></li>
<li><a class="nav" href="places.html">PLACES</a></li>
<li><a class="nav" href="people.html">PEOPLE</a></li>
<li><a class="nav" href="architecture.html">ARCHITECTURE</a></li>
<li><a class="nav" href="projects.html">PROJECTS</a></li>
<li><a class="nav" href="published.html">PUBLISHED</a></li>
</section>
CSS
CSS
#nav{
width:100%;
text-align:center;
min-width:1300px;
height:80px;
position:absolute;
top:0;
left:0;
background:#fff;
list-style:none;
border-bottom: 1px solid #000;
}
#nav li{
display:inline;
}
#nav .nav{
display:inline-block;
background-color:#000;
color:#FFF;
font-family: 'Oswald', sans-serif;
letter-spacing:1px;
font-size:16pt;
line-height:18pt;
font-weight:400;
text-decoration:none;
margin-right: 3px;
margin-left: 3px;
margin-top:35px;
padding:0px 3px 2px 3px;
}
#nav .nav:hover{
background:#FFFF00;
color:#000;
}
.active{
background:#FFFF00;
color:#000;
}
JQUERY
查询
<script>
$(document).ready(function() {
$("#nav li .nav").click(function ( e ) {
e.preventDefault();
$("#nav li a.active").removeClass("active"); //Remove any "active" class
$(this).addClass("active"); //Add "active" class to selected tab
// $(activeTab).show(); //Fade in the active content
});
});
Thanks in advance!
提前致谢！
采纳答案by Gary Storey
$(function() {
$('#nav').on('click','.nav', function ( e ) {
e.preventDefault();
$(this).parents('#nav').find('.active').removeClass('active').end().end().addClass('active');
$(activeTab).show();
});
});
I updated the code to use only one click event on the parent container and in the function reduced the DOM traversals. BUT, you also need to update your CSS. You aren't getting the background color because of specificity. You specified the background color and the hover using the #navid. So you need to specify the .active class that way as well.
我更新了代码，只在父容器上使用一个点击事件，并在函数中减少了 DOM 遍历。但是，您还需要更新您的 CSS。由于特殊性，您没有获得背景颜色。您使用#navid指定了背景颜色和悬停。因此，您也需要以这种方式指定 .active 类。
#nav .active {
/* css here */
}
回答by Vajira Lasantha
I used following code. Late answer, but I hope this will help someone.
我使用了以下代码。迟到的答案，但我希望这会对某人有所帮助。
// This will work for both relative and absolute hrefs
function active_menu() {
var url = window.location.href;
$('.nav a').filter(function() {
return this.href == url;
}).addClass('selected');
}
回答by Kabir Hossain
I faced this problem. I solve this as.
我遇到了这个问题。我解决这个问题。
<script>
$(window).load(function(){
var url = window.location.href;
$('nav li').find('.active').removeClass('active');
$('nav li a').filter(function(){
return this.href == url;
}).parent().addClass('active');
});
</script>
You can save jsfiddledemo to local and you can test.
您可以将jsfiddle演示保存到本地并进行测试。
回答by daviek19
I solved this by simply traversing my Menu Urls and matching them with the active page Url then added the active css class to the found result. This worked for me:
我通过简单地遍历我的菜单 Url 并将它们与活动页面 Url 匹配来解决这个问题，然后将活动的 css 类添加到找到的结果中。这对我有用：
//Get the current page link
current_page_link = document.location.href;
//Search your menu for a linkURL that is similar to the active pageURL
$(".navbar-nav a").each(function(){
var link_loop = $(this).attr("href");
if(link_loop === current_page_link){
var found_url = $(this).attr("href");
$('.navbar-nav a[href="'+found_url+'"]').addClass('active');
}
});
回答by Amin Jafari
try this:
尝试这个：
$(document).ready(function() {
$("#nav li .nav").click(function ( e ) {
e.preventDefault();
$("#nav li a.active").removeClass("active"); //Remove any "active" class
$(this).addClass("active"); //Add "active" class to selected tab
$(activeTab).show(); //Fade in the active content
});
});
you missed some #and also no need to use $("a", this)$(this)will do the job!
您错过了一些#，也无需使用即可$("a", this)$(this)完成工作！
回答by Ji?í Zapletal
Take textfrom #page-indicatorand set class activeto <li><a href="#">text</a></li>.
以text从#page-indicator与集类active来<li><a href="#">text</a></li>。
<!-- Bootstrap 3.3.6 part of navigation -->
<ul class="nav navbar-nav">
<li><a href="#">First</a></li>
<li><a href="#">Second</a></li>
<li><a href="#">Third</a></li>
<li><a href="#">Fourth</a></li>
<li><a href="#">Fifth</a></li>
<li><a href="#">Sixth</a></li>
</ul>
<!-- Page name indicator -->
<span id="page-indicator" class="hidden"><?= $pageName = 'Third' ?></span>
<!-- jQuery 1.11.3 -->
<script>
$(document).ready(function () {
$('.navbar-nav li').each(function () {
if ($(this).text() == $('#page-indicator').text()) {
$(this).addClass('active');
}
});
});
</script>
