Question

我有一个JS翻转开关，但当我点击链接时，橙色不会停留，它会恢复为灰色。我错过了什么？这是我的代码（橙色是color: #f7931d）：

CSS：

#content-slider {
    padding-top:5px;
    height: 240px;
    width: 359px;
    padding-left: 52px;
    font-family: 'Century Gothic';
    font-size: 11px;
    color: #BBBDC0;
    display:inline-block;
    padding-bottom:25px;
    overflow: hidden;
}

#content-slider-inside {
    list-style: none;
    height: 240px;
    overflow:hidden;
    overflow-y: hidden;
}

    #content-slider-inside li {
        height: 340px;
        width: 359px;
        font-family: 'Century Gothic';
        font-size: 11px;
        color: #BBBDC0;
        display:inline-block;
        padding-bottom:25px;
    }

#navigation {
    font-family: 'Century Gothic';
    font-size: 14px;
    color: #BBBDC0;
    display: inline-block;
    width: 940px;
    height: 18px;
    text-transform: uppercase;
    padding-left: 45px;
    padding-top: 20px;
    padding-bottom:10px;
    overflow: hidden;
    white-space: nowrap;
    text-decoration: none;
}

#navigation li {
    color:#bbbdc0;
    display:inline-block;
    padding:5px;
    text-decoration: none;

}

#navigation li a, #navigation li a:link, #navigation li a:visited {
    color:#bbbdc0;
    display:inline-block;
    text-decoration: none;

}

#navigation li a.selected, #navigation li a.selected:link, #navigation li a.selected:visited, #navigation li a.selected:active {
    color:#f7931d;
    display:inline-block;
    text-decoration: none;
}

#navigation li a:hover, #navigation li a:focus, #navigation li a:active, #navigation li a:focus:active {
    display:inline-block;
    text-decoration: none;
    color:#f7931d;
}

HTML：

<ul id="navigation">
    <li><a href="#overview">overview</a></li>
    <li><a href="#features">features</a></li>
    <li><a href="#resumemanagement">resume management</a></li>
    <li><a href="#financials">financials</a></li>
    <li><a href="#tracking">expense tracking</a></li>
    <li><a href="#search">search</a></li>
</ul>

然后其余部分基本上只是点击链接时的标签和锚点。

<div id="content-slider">
    <ul id="content-slider-inside">
        <li id="overview">
            text            
        </li>
        <li id="features">
            text
        </li>
        <li id="resumemanagement">
            text                
        </li>
        <li id="financials">
            text
        </li>
        <li id="tracking">
            text            
        </li>
        <li id="search">
            text            
        </li>
    </ul>
</div>

Answer 1

听起来您正在询问如何保持菜单项突出显示当前页面。我刚刚在Stack Overflow上发现了这个方便的小jQuery片段，所以我很抱歉它没有被正确归类。如果有人认出这一点，请告诉我，我会更新积分！

<script>
    $(document).ready(function(){
        var url = window.location.href.substr(window.location.href.lastIndexOf("/") + 1);
        $('[href$="'+url+'"]').parent().addClass("nav-active"); //replace nav-active class with your preferred highlighting class-- in this case the orange color.
    });
</script>

基本上它会读取浏览器URL，如果URL的末尾与菜单项匹配，它将保持突出显示。

单击后，JS驱动的菜单中的链接颜色不会停留

1 个答案: