在 CSS 菜单栏中突出显示当前选定的链接答案

【问题标题】：highlight currently selected link in css menu bar在 CSS 菜单栏中突出显示当前选定的链接
【发布时间】：2012-04-29 17:59:40
【问题描述】：

我有一个带有此 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 框架。

【问题讨论】：

我相信您的localhost URL 无法在世界其他地方访问 ;)
@VisioN 如果您阅读了这个问题，那就不重要了。
@sg3s，是的，但是你怎么知道active作者的意思。我们没有足够的 HTML 来做这件事。如果 'current selected menu link' 带有 active 类，答案很明显，否则可能会有其他问题。
@VisioN 很公平，更多的 html 或直接访问源代码总是有帮助的

标签： javascript html css django menu

【解决方案1】：

试试这个jQuery代码，它会自动添加类

$(function(){

    var url = window.location.href; 

    $("#menu a").each(function() {

        if(url == (this.href)) { 
            $(this).closest("li").addClass("active");
        }
    });

});

【讨论】：

谢谢你，蒂兰卡·德席尔瓦。非常简单的解决方案，最好的部分是它有效。我尝试了我知道的每一个技巧，谷歌搜索，尝试接受 SOF 上的答案，但这个藏起来的宝石为我做到了。

【解决方案2】：

在您的 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>

【讨论】：

谢谢。我正在考虑使用 javascript 添加该功能。但既然你不推荐它，我必须在 django 中找到一种方法来做到这一点
@John 不幸的是，我对 django 不太熟悉，但一个简单的搜索让我找到了这个可能有用的页面：gnuvince.wordpress.com/2007/09/14/…
还有一个问题。项目符号出现在我的 ul 列表中。有没有办法让它消失。
@John Sure，在无序列表上使用list-style: none; (ul)

【解决方案3】：

将您的 id #active 替换为 .active 类 - 这是更正确的方法：

.menu_div ul li.active
{
    background:blue;
}

并将此类添加到列表中的活动元素：

<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>

【讨论】：

【解决方案4】：

.menu_div ul li#active

它说活动链接需要一个活动的 id。我看不到 id，所以它不是蓝色的。

如果您希望链接处于活动状态，则必须将项目设置为活动状态，浏览器不会为您执行此操作。

【讨论】：

【解决方案5】：

只是

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>

【讨论】：