1

現在、Web サイトの 1 つのナビゲーション バーをデザインしようとしています。このナビゲーション バーは、Web ページの上部に表示されます。

問題は、アイテムにカーソルを合わせるとアイテムの色が変わることですが、ページがアクティブになると、アイテムをホバー状態に保つことができません。たとえば、「ホーム」に移動したい場合、ナビゲーション バーの「ホーム」項目にカーソルを合わせると、それをクリックして「index.php」の「ホーム」に戻ると灰色になります。ナビゲーション バーの " はグレーのままです。(ナビゲーションバーの背景は黒です)。

単一の行と、リンクとして機能するいくつかのデータでテーブルをフォーマットしました。HTML コードは次のようになります。

<div id="header_banner">
<table id="header_banner_table">
    <tr id="header_banner_row">
        <td id="header_banner_a"><a class ="link1" href="">Item 1</a></td>
        <td id="header_banner_b"><a class ="link1" href="">Item 2</a></td>
        <td id="header_banner_c"><a class ="link1" href="">Item 3</a></td>
        <td id="header_banner_d"><a class ="link1" href="">Item 4</a></td>
        <td id="header_banner_e"><a class ="link1" href="">Item 5</a></td>
        <td id="header_banner_f"><a class ="link1" href="">Item 6</a></td>
        <td id="header_banner_g"><a class ="link1" href="">Item 7</a></td>
    </tr>
</table>
</div>

CSS の一部を次に示します。

#header_banner {
    display: block;
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    width: 100%;
    height: 71px;
    background-color: black;
    color: white;
    font-size: 18px;
    text-align:center;
    text-transform: uppercase;
    text-decoration: none;
}

#header_banner_table {
    position: fixed;
    top: 0px;
    width: 60%;
    padding: 0px;
    margin-left: 20%;
    margin-right: 20%;
}

.link1 {
position: relative;
display: block;
color: white;
text-decoration: none;
padding-top: 23px;
padding-bottom: 23px;
padding-left: 20px;
padding-right: 20px;
}

.link1:hover{
position: relative;
display: block;
text-decoration: none;
color: white;
padding-top: 23px;
padding-bottom: 23px;
padding-left: 20px;
padding-right: 20px;
background-color: gray;
}

現在、ナビゲーション バーの背景は黒で、何かにカーソルを合わせると灰色になります。そのページがアクティブなときはグレーのままにしたいと思います。

解決策はありますか？

前もって感謝します。

4

2 に答える 2

1

jQueryに精通していますか？私があなたと同じことを考えているなら、jQuery でできるはずです。

var path = window.location.pathname;

$('#header_banner_row a').each(function(){
    if( $(this).attr('href') === path ){
        $(this).addClass('active');
    }
});

つまり、基本的にvar pathは、ブラウザのナビゲーション バーで .com の後にあるものです。そして、そのパスがヘッダー内の の 1 つと同じである場合a、灰色にスタイル設定できるアクティブのクラスが取得されます。

于 2013-08-05T00:40:08.477 に答える
1

試す

:focus

また

:active

しかし、クリックする必要があると思います。

于 2013-08-05T00:35:06.083 に答える