0

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

1 に答える 1

0

現在のページの場合、メニュー項目を強調表示したままにする方法を尋ねているようです。しばらく前に 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 の末尾がメニュー項目と一致する場合は、それを強調表示したままにします。

于 2013-06-17T19:23:03.203 に答える