javascript - Bootstrap JS and Navbar Button - Stack Overflow

admin管理员组

文章数量:1278978

I normally use Ruby on rails to develop my work with sublime text as my text editor, but today I am using just using notepad and creating a site locally. Now normally all my js and css is rendered perfectly via the asset pipeline in rails but I am having trouble getting the js to work, in particular the dropdown button in the navbar.

i am calling Jquery within the header

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

And I am calling my bootstrap.js file

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

The css for the navbar is as follows

 <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>

Am i missing something blindly obvious because the button is not responding?

Any help appreciated

I normally use Ruby on rails to develop my work with sublime text as my text editor, but today I am using just using notepad and creating a site locally. Now normally all my js and css is rendered perfectly via the asset pipeline in rails but I am having trouble getting the js to work, in particular the dropdown button in the navbar.

i am calling Jquery within the header

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

And I am calling my bootstrap.js file

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

The css for the navbar is as follows

 <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>

Am i missing something blindly obvious because the button is not responding?

Any help appreciated

• javascript
• twitter-bootstrap

Share Improve this question Follow edited Aug 22, 2012 at 12:35 Richlewis asked Aug 22, 2012 at 12:29 RichlewisRichlewis 15.4k3939 gold badges137137 silver badges300300 bronze badges 4

• Ruby on rails is a text editor too?! – tkone Commented Aug 22, 2012 at 12:33
• 1 edited question @tkone, constructive answers would be great! – Richlewis Commented Aug 22, 2012 at 12:36
• Well...see your question still don't make sense so it's hard to be constructive. The code you're showing is HTML, not CSS. There is no "button" in the code, rather a link which has a CSS class which makes it appear to be a button. Have you tried using the debugger in your browser to ensure that the onclick method for the link is being called when you click on it? – tkone Commented Aug 22, 2012 at 12:39
• The css is provided by bootstrap.css. what is this doing <a class="btn btn-navbar"? I was under the impression that this was the button? – Richlewis Commented Aug 22, 2012 at 12:41

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

Have you included the required bootstrap.css stylesheet?

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

Edit 1:

Here's a jsBin with your HTML/bootstrap. If you aren't seeing the same output then something is indeed wrong. If you're expecting some behavior when one of the navbar buttons gets clicked, then it isn't actually an error: there is no js behavior attached to the click of the navbar.

Bootstrap will provide you with a "prettified" navbar, it changes the aesthetics but not the behavior, you still need to connect to the individual clicks and define your own behavior for them.

Edit 2:

To connect to the clicks you have to get your menu items and use jQuery to define onclick behaviors. An example would be to define unique ids for each navbar item

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

And then retrieve them with jQuery's selectors and attach click handlers:

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

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

I've edited the jsbin to add this example.

The CDN wasnt pulling the jquery so i have hosted the file locally now and it works fine

本文标签： javascriptBootstrap JS and Navbar ButtonStack Overflow