0

このサイトで友人を助けるために、関連するページにいるときにJQueryを使用してアクティブなメニュー見出しを強調表示することができました. リスト項目の「a」オブジェクトに「active」クラスが追加されました。

<script type="text/javascript">
    jQuery(document).ready(function($){
        var url = window.location;
        $('#nav-menu li a[href="'+url+'"]').addClass('active');
    });
</script>

私の問題は、各メニュー項目が選択されたとき (ホバーしていないとき) に各メニュー項目の左側にアイコンを表示する必要があることです。以前の JQuery コードに追加して、他の方法では見えない DIV も表示するにはどうすればよいですか? JQuery を使用しない提案も歓迎します。

4

3 に答える 3

0

クラスに背景を与えるだけです（矢印や基本的な画像を与えるだけの場合）

このような 。

.active{
background: url('location') no-repeat 0% 50%;
padding: 10px //some value
}
于 2012-09-19T21:59:14.337 に答える
0

div が非表示ではないことを示すクラスを作成する場合は、そのクラスを非表示の DIV に追加するために既に必要な同じコードを使用できます。

私が個人的に行うことは、ボタンの残りの部分と同じ div にアイコンをネストすることです。次に例を示します。

<div class="button-holder">
     <div class="icon"></div>
     <div class="button-text">Contact Page</div>
</div>

次に、.button-holder にクラス .active を JQuery で指定すると、.icon クラスを操作することもできます

.button-holder {
    /*some properties*/
}
.button-holder .icon {
    /* hide the icon if .button-holder is not active*/
    display: none;
}
.button-holder.active .icon {
    /* if .button-holder is also .active make it visible */
    display: inline-block;
}

お役に立てれば

于 2012-09-19T22:00:52.163 に答える
0

リンクがアクティブなクラスの場合、その画像の可視性プロパティを true に設定します

var icon_visibility = $('#link').hasClass('active') ? 'visible' : 'hidden';
$('#icon').css('visibility', icon_visibility);
于 2012-09-19T22:05:01.037 に答える