1

私はTwitterのブートストラップを使用しており、ヘッダーを作成するために、このようなものがあります

  <ul class="nav navbar-nav">
    <li><a href="#" class="active" onclick="$(this).addClass('active')">Home</a></li>
    <li class="currentselection"><a href="#about">About</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>

結果は次のようになります。

ホーム | について | コンタクト

LIVEバージョンはこちらからご覧いただけます：

ホーム | について | お問い合わせ - ライブデモ

問題は、アクティブな の 1 つだけをスタイルしたい<a>ので、ユーザーが [バージョン情報] をクリックすると、 は<a class="active">About</a>アクティブとしてスタイルされ、 はアクティブ<a>Home</a>としてマークされなくなります。これは非常に一般的で簡単に達成できるように見えますが、私は 2 日間いじくり回してきましたが、C と CPP のバックグラウンドから来て、JavaScript が非常に苦手です... 説明して、どれをマークしてくださいこれを達成できるファイル（.cssまたは.jsまたは.html自体の内部）？

ご助力ありがとうございます！

4

1 に答える 1

1

これを twitter-bootstrap でタグ付けしたということは、jQuery が実行されているということですか? もしそうなら、それは簡単な修正です。

次のように CSS を設定するだけです。

.nav li a { color: #000; background: #FFF; }
.nav li a.active { color: #FFF; background: #FF0000 }

次に、スクリプトのどこかに jQuery リスナーを配置することで、要素の「アクティブな」クラスを変更できます。この場合、誰かがそれをクリックするのを聞いています:

$(function() {
   $('ul.nav li a').on('click', function(e) {

       //this line prevents the link for actually redirecting you
       e.preventDefault(); 

       //this line clears whatever the previous active link was
       $(this).closest('ul').find('li a.active').removeClass('active');

       //this line adds the class to the current link
       $(this).addClass('active');

   });
});
于 2013-08-11T01:29:35.733 に答える