0

ウェブサイトに素敵な（jquery+ css）ナビゲーションメニューを追加しましたが、小さな問題があります。メニュー項目をクリックすると、水色のボックスが最初の項目に戻り、クリックした項目にボックスを残したいのですが、どうすればよいかわかりません。

次に例を示します：http：//jsfiddle.net/Stylock/ta8g4/

その例では、実際には私が望むように機能しますが、私のWebサイトでは何らかの理由で機能しません。どんな助けでも大歓迎です。

4

3 に答える 3

0

これは正しい方向への解決策かもしれません: オンクリックで、背景を変更するためのクラス名がメニューに既にあるかどうかを確認します。そこからそのクラスを削除します。クリックした場所にクラスを追加します。

すてきな一日を

于 2013-03-13T10:13:41.987 に答える
0

他のページがロードされたときにクラスを追加して、このようにすべてのページに追加することができます

<script type="text/javascript">

    $(window).load(function () {
        $("#index").toggleClass("highlight");

    });


    $(window).unload(function () {
        $("#index").toggleClass("highlight");
    });

</script>

私がこれを使用したサイト http://www.hoteloperaindia.com/

または、この短いもののように、これをマスターページに追加します

 <script>
        $(function () {
            var loc = window.location.href; // returns the full URL
            if (location.pathname == "/")  {
                $('#home').addClass('active');
            }
            if (/index/.test(loc)) {
                $('#home').addClass('active');
            }
            if (/about/.test(loc)) {
                $('#about').addClass('active');
            }
            if (/accommodation/.test(loc)) {
                $('#accommodation').addClass('active');
            }
            if (/gallery/.test(loc)) {
                $('#gallery').addClass('active');
            }
            if (/tariff/.test(loc)) {
                $('#tariff').addClass('active');
            }
            if (/facilities/.test(loc)) {
                $('#facilities').addClass('active');
            }
            if (/contact/.test(loc)) {
                $('#contact').addClass('active');
            }
        });
</script>

私がこれを使用したサイトhttp://rtshotel.in/

あなたのコードでそれを変更してください

于 2013-03-13T10:17:13.680 に答える
0

.selected のようなアイテムにクラスを追加できます

そしてあなたのcssでは、:hoverよりも.selectedに同じスタイルを適用します

http://api.jquery.com/addClass/

または、jQuery を使用して css を変更することもできます。ただし、最初のソリューションはより柔軟です。

編集：効果の後に、コールバック関数を使用してクラスを追加/削除します

于 2013-03-13T10:08:27.987 に答える