1

私はjqueryの初心者です。このhtmlコードメニューがあります：

<nav>
    <ul class="navtab">
        <li class='home selected'><a href='index.php'>Home</a></li>
        <li class='about'><a href='company.php'>About</a></li>
    </ul>
</nav>

これはjqueryコードです：

$(".navtab li.about").click(function(){
    $('.navtab li.home').removeClass('selected');
    $('.navtab li.about').addClass('selected');
});

そしてこれは私のCSSです：

nav ul.navtab li.selected a{
    color: #fff;
    background-color: #575757;
}

ページ読み込みタブのホームが選択されたとき。about タブをクリックすると、タブ home で選択されたクラスを削除し、tab about で選択されたクラスを追加します。問題はどこだ？？

前もって感謝します。ファビオ

4

4 に答える 4

3

removeClass('home.selected')の代わりに使用することremoveClass('selected');も$('.navtab li.home')できます$('.navtab li.home.selected')

ライブデモ

$("nav li.about").click(function(){  
     $('nav li.home.selected').removeClass('home selected');     
     $('nav li.about').addClass('selected');
});
于 2012-09-26T17:02:43.807 に答える
1

クライアント側でページをロードしていた場合は、代わりに次のようにします。

$(function(){

    $(".navtab>li").click(function(){
        $(this).addClass('selected').siblings().removeClass('selected');
    });

});

これは、リスト項目がクリックされたときに機能します。

サーバー側で新しいページをロードしている場合は、選択したクラス サーバー側を設定する必要があります。

于 2012-09-26T17:09:35.067 に答える
0

選択したセクションを強調表示する場合は、サーバー側で行う必要があります。

リンクをクリックしたときにクライアント側のクラスを台無しにすると、ページがリロードされ、jQuery コールバックは無効になります。

于 2012-09-26T17:06:10.620 に答える
0

'data-type=""' 属性を使用するか、単に name 属性を使用して、このメニューのオン状態を管理できます。

<nav>
<ul class="navtab">
<li class='home selected' id="homepage" name="nav_item"><a href='#'>Home</a></li>
<li class='about' id="company" name="nav_item"><a href='#'>About</a></li>
</ul>
</nav>​

そして、ここにjQueryがあります：

$("[name='nav_item']").click(function(){
$("[name='nav_item']").removeClass('selected');
$(this).addClass('selected');
});​

ナビゲーション項目がクリックされると、jQuery は「選択された」クラスのすべてのインスタンスを削除し、クリックされたリンクに「選択された」クラスを追加します。これがうまくいくかどうか教えてください...ここでjsFiddleを作成しました。

必要に応じて、ID を他のものに使用できます。これは、より効率的でクリーンな方法のように思えます。

これは、ページを更新しない限り機能します...それ以外の場合は、バックエンド コード (PHP、JSP など) を使用してオン状態を管理します。

PHP の例:

<?php
if (isset($_GET['page']) && $_GET['page'] == 'homepage'){
    $selected_link = 'class="selected"'; //set the class if page is homepage
} else $selected_link = ''; //empty, will not throw and error
?>

次に、あなたのリンク：

<li class='home' id="homepage" <?php echo $selected_link;?>>
于 2012-09-26T17:28:11.160 に答える