2

私は通常、Ruby on Railsを使用して、テキストエディターとして崇高なテキストを使用して作品を開発していますが、今日はメモ帳を使用してローカルでサイトを作成しています。現在、通常、すべてのjsとcssは、レール内のアセットパイプラインを介して完全にレンダリングされますが、jsを機能させるのに問題があります。特に、ナビゲーションバーのドロップダウンボタンです。

ヘッダー内でJqueryを呼び出しています

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>

そして、私は自分のbootstrap.jsファイルを呼び出しています

<script src="js/bootstrap.js" type="text/javascript"></script>

ナビゲーションバーのCSSは次のとおりです

 <div class="container">
  <div class="navbar">
    <div class="navbar-inner">
     <div class="container">

  <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </a>


  <!-- Everything you want hidden at 940px or less, place within here -->
  <div class="nav-collapse">
    <ul class="nav">
  <li><a href="#">Home</a></li>
  <li><a href="#">About Us</a></li>
  <li><a href="#">Menu</a></li>
  <li><a href="#">Contact Us</a></li>
</ul>
  </div>

</div>

ボタンが反応しないので、私は盲目的に明白な何かを見逃していますか？

助けていただければ幸いです

4

2 に答える 2

7

必要なbootstrap.cssスタイルシートを含めましたか？

 <link href="css/bootstrap.min.css" rel="stylesheet">

編集1：

これがHTML/ブートストラップを備えたjsBinです。同じ出力が表示されない場合は、実際に何かが間違っています。ナビゲーションバーのボタンの1つがクリックされたときに何らかの動作が予想される場合、それは実際にはエラーではありません。ナビゲーションバーのクリックに付随するjsの動作はありません。

Bootstrapは、「きれいな」ナビゲーションバーを提供します。これは、見た目を変更しますが、動作は変更しません。個々のクリックに接続して、独自の動作を定義する必要があります。

編集2：

クリックに接続するには、メニュー項目を取得し、jQueryを使用してクリック時の動作を定義する必要があります。例として、ナビゲーションバーアイテムごとに一意のIDを定義します。

<li><a id="home" href="#">Home</a></li>
<li><a id="about" href="#">About Us</a></li>

次に、jQueryのセレクターを使用してそれらを取得し、クリックハンドラーをアタッチします。

$("#home").click(function() {
  alert('home clicked');
});

$("#about").click(function() {
  alert('about clicked');
});

この例を追加するためにjsbinを編集しました。

于 2012-08-22T12:37:53.653 に答える
1

CDNはjqueryをプルしていなかったので、ファイルをローカルでホストしましたが、正常に動作します

于 2012-08-29T11:11:55.437 に答える