[英]highlight currently selected link in css menu bar
我有一个使用此URL的页面: http:// localhost:8000 / progress / c /?l = 1&c = 1
并将以下内容用作简单的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样式是
.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;
}
当我将鼠标悬停在链接上时,背景颜色会更改,但是当前选择的菜单链接不会以蓝色突出显示。
我正在使用django框架。
试试这个jQuery代码,它将自动添加类
$(function(){
var url = window.location.href;
$("#menu a").each(function() {
if(url == (this.href)) {
$(this).closest("li").addClass("active");
}
});
});
在您的CSS中,您有一个ID为“ active”的类,这可能应该是这样的类:
.menu_div ul li.active
{
background:blue;
}
此外,我不建议您尝试使用javascript客户端来匹配“有效”页面或制定更好的“当前”页面。
相反,服务器上的脚本应识别当前页面,并向相关菜单项中添加一个类,使其看起来像这样:
<li class="active"><a href="/progress/c/?l=1&c=1"> l1c1 </a></li>
将您的id #active
替换为class .active
这是更正确的方法:
.menu_div ul li.active
{
background:blue;
}
并将此类添加到列表中的active元素:
<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>
.menu_div ul li#active
它表示活动链接需要一个活动ID。 我看不到id,因此为什么它不是蓝色。
如果您希望链接处于活动状态,则必须将该项目设置为活动状态,浏览器将不会为您执行此操作。
只是
的CSS
.menu_div ul li.active{background:blue}
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>
脚本
#In every page just put this script and change the id
<script>$("#page1").addClass('active');</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.