-2

ナビゲーションバーとしてブートストラップピルを使用しています.問題は、現在アクティブなピルが青色の背景で表示されていないことです(ブートストラップのように)ここに私のコードがあります

<div style="margin-left: 15px;margin-bottom: 15px;margin-top: 10px;">
    <ul class="nav nav-pills">
        <li class="active">
            <a href="index.php">Home</a></li>
        <li class=""><a href="Project.php">Projects</a></li>

        <li class=""><a href="#">Employee</a></li>

        <li><a href="#">Forum</a></li>


    </ul>
</div>

出力はここにあります

ホームピルだけが集中している

4

2 に答える 2

2

scriptタグ内に次のコードを追加します。

$(document).ready(function(){
   $(".nav-pills li").click(function(){
       $(".active").removeClass("active");
       $(this).addClass("active");
   });
});

デモ

于 2013-03-26T15:50:03.553 に答える
0

コメントに基づいて完全な回答を得るために、JSFiddle は期待どおりに機能します。.active クラスのアイテムは、ピルの背景が青色になります。

ただし、リンクをクリックすると、ピルが自動的にアクティブになると予想されると思いますが、これはどのように機能するかではありません.

オンザフライでメニューを生成し、生成中にアクティブなクラスを割り当てるか、各ページで JS を使用してアクティブなクラスを正しいメニュー リスト項目に割り当てる必要があります。使いやすくするために、次のことができるようにリスト項目に ID を割り当てることをお勧めします。

たとえば、2 番目のメニュー項目をクリックすると、Projects.php ページで次の jquery を作成できます。

$('#project').addClass("active");

メニュー項目 ID を指定したと仮定します。

于 2013-03-26T15:56:03.823 に答える