javascript 在 css 菜单栏中突出显示当前选定的链接
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10374533/
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 currently selected link in css menu bar
提问by John
I have a page with this URL: http://localhost:8000/progress/c/?l=1&c=1
我有一个带有这个 URL 的页面：http://localhost:8000/progress/c/?l=1&c=1
And the below content to work as a simple css menu bar.
以下内容可用作简单的 css 菜单栏。
<div class="menu_div">
<ul>
<li><a href="/progress/c/?l=1&c=1"> l1c1 </a></li>
<li><a href="/progress/c/?l=2&c=1"> l1c1 </a></li>
<li><a href="/progress/c/?l=3&c=1"> l1c1 </a></li>
<li><a href="/progress/c/?l=4&c=1"> l1c1 </a></li>
</ul>
</div>
CSS styling is
CSS 样式是
.menu_div ul
{
padding:6px;
margin:0px;
font-size:12px;
list-style:none;
text-indent:15px;
}
.menu_div ul li
{
line-height:28px;
border-bottom:1px solid #000;
}
.menu_div ul li a
{
text-decoration:none;
font-color:#3A332D;
display:block;
}
.menu_div ul li a:hover
{
background:blue;
}
.menu_div ul li#active
{
background:blue;
}
When I hover over the links the background color changes but the currently selected menu link is not highlighted in blue.
当我将鼠标悬停在链接上时，背景颜色会发生变化，但当前选择的菜单链接并未以蓝色突出显示。
I'm using django framework.
我正在使用 Django 框架。
回答by Thilanka De Silva
Try this jQuery code, it will add the class automatically
试试这个 jQuery 代码，它会自动添加类
$(function(){
var url = window.location.href;
$("#menu a").each(function() {
if(url == (this.href)) {
$(this).closest("li").addClass("active");
}
});
});
回答by sg3s
In your CSS you have a class with the id 'active', this should probably be a class like this:
在您的 CSS 中，您有一个 id 为“active”的类，这可能应该是这样的类：
.menu_div ul li.active
{
background:blue;
}
Further, I wouldn't recommend trying to match the 'active' or better formulated 'current' page using javascript client side.
此外，我不建议尝试使用 javascript 客户端匹配“活动”或更好制定的“当前”页面。
Instead your script on the server should recognize the current page and add a class to the related menu item so it would look like this:
相反，您在服务器上的脚本应该识别当前页面并向相关菜单项添加一个类，因此它看起来像这样：
<li class="active"><a href="/progress/c/?l=1&c=1"> l1c1 </a></li>
回答by catherine
Just
只是
css
css
.menu_div ul li.active{background:blue}
html
html
<div class="menu_div">
<ul>
<li id="page1"><a href="/progress/c/?l=1&c=1"> l1c1 </a></li>
<li id="page2"><a href="/progress/c/?l=2&c=1"> l1c1 </a></li>
<li id="page3"><a href="/progress/c/?l=3&c=1"> l1c1 </a></li>
<li id="page4"><a href="/progress/c/?l=4&c=1"> l1c1 </a></li>
</ul>
</div>
script
脚本
#In every page just put this script and change the id
<script>$("#page1").addClass('active');</script>
回答by Skay
Replace your id #activeto class .active- that is more right way:
将您的 id 替换#active为 class .active- 这是更正确的方法：
.menu_div ul li.active
{
background:blue;
}
and add this class to active element in your list:
并将此类添加到列表中的活动元素：
<div class="menu_div">
<ul>
<li class="active"><a href="/progress/c/?l=1&c=1"> l1c1 </a></li>
<li><a href="/progress/c/?l=2&c=1"> l1c1 </a></li>
<li><a href="/progress/c/?l=3&c=1"> l1c1 </a></li>
<li><a href="/progress/c/?l=4&c=1"> l1c1 </a></li>
</ul>
</div>
回答by epascarello
.menu_div ul li#active
It says the active link needs an id of active. I see no id, hence why it is not blue.
它说活动链接需要一个活动ID。我看不到 id，因此它不是蓝色的。
If you want the link to be active, you are going to have to set the item to be active, the browser will not do it for you.
如果您希望链接处于活动状态，则必须将项目设置为活动状态，浏览器不会为您执行此操作。
