发表新帖
发表新帖

Twitter Bootstrap tabs not working: when I click on them nothing happens

前端 未结
关注
13 1071
温柔的废话
温柔的废话 2020-12-04 10:49

I am trying to implement Twitter Bootstrap tabs in the following code, but it does not seem to work. The tabs get displayed, but when I click on them nothing happens. Below

相关标签:
13条回答
  • 抹茶落季
    2020-12-04 11:28

    The key elements include:

    1. the class="nav nav-tabs" and data-tabs="tabs" of ul
    2. the data-toggle="tab" and href="#orange" of the a
    3. the class="tab-content" of the div of the content
    4. the class="tab-pane" and id of the div of the items

    The complete code is as below:

    <ul class="nav nav-tabs" data-tabs="tabs">
    <li class="active"><a data-toggle="tab" href="#red">Red</a></li>
    <li><a data-toggle="tab" href="#orange">Orange</a></li>
    <li><a data-toggle="tab" href="#yellow">Yellow</a></li>
    <li><a data-toggle="tab" href="#green">Green</a></li>
    <li><a data-toggle="tab" href="#blue">Blue</a></li>
</ul>
<div class="tab-content">
    <div class="tab-pane active" id="red">
        <h1>Red</h1>
        <p>red red red red red red</p>
    </div>
    <div class="tab-pane" id="orange">
        <h1>Orange</h1>
        <p>orange orange orange orange orange</p>
    </div>
    <div class="tab-pane" id="yellow">
        <h1>Yellow</h1>
        <p>yellow yellow yellow yellow yellow</p>
    </div>
    <div class="tab-pane" id="green">
        <h1>Green</h1>
        <p>green green green green green</p>
    </div>
    <div class="tab-pane" id="blue">
        <h1>Blue</h1>
        <p>blue blue blue blue blue</p>
    </div>
</div>
    0 讨论(0)
  • 广开言路
    2020-12-04 11:31

    I tried the codes from bootstrap's document as follows:

    <!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>tab demo</title>
  <link rel="stylesheet" href="bootstrap.css">
</head>
<body>
<div class="span9">
    <div class="tabbable"> <!-- Only required for left/right tabs -->
      <ul class="nav nav-tabs">
        <li class="active"><a href="#tab1" data-toggle="tab">Section 1</a></li>
        <li><a href="#tab2" data-toggle="tab">Section 2</a></li>
      </ul>
      <div class="tab-content">
        <div class="tab-pane active" id="tab1">
          <p>I'm in Section 1.</p>
        </div>
        <div class="tab-pane" id="tab2">
          <p>Howdy, I'm in Section 2.</p>
        </div>
      </div>
    </div>
</div> 
<script src="jquery.min.js"></script>
<script src="bootstrap.js"></script>
</body>
</html>

    and it works. But when I switch these two <script src...>'s postion, it do not work. So please remember to load your jquery script before bootstrap.js.

    0 讨论(0)
  • 长情又很酷
    2020-12-04 11:33

    For me, the problem was that I wasn't including bootstrap.min.css (I was only including bootstrap-responsive.min.css).

    0 讨论(0)
  • 我寻月下人不归
    2020-12-04 11:34

    I have the same problem, but above some answers might be tricky for me.

    I found the other answer maybe solve your question Twitter Bootstrap Js (tabs, popups, dropdown) not working in Drupal

    place jquery.js before bootstrap.tab.js

    0 讨论(0)
  • -上瘾入骨i
    2020-12-04 11:35

    You need to add tabs plugin to your code

    <script type="text/javascript" src="assets/twitterbootstrap/js/bootstrap-tab.js"></script>

    Well, it didn't work. I made some tests and it started working when:

    1. moved (updated to 1.7) jQuery script to <head> section
    2. added data-toggle="tab" to links and id for <ul> tab element
    3. changed $(".tabs").tabs(); to $("#tabs").tab();
    4. and some other things that shouldn't matter

    Here's a code

    <!DOCTYPE html>
<html lang="en">
<head>
<!-- Le styles -->
<link href="../bootstrap/css/bootstrap.css" rel="stylesheet">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
</head>

<body>

<div class="container">

<!-------->
<div id="content">
    <ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
        <li class="active"><a href="#red" data-toggle="tab">Red</a></li>
        <li><a href="#orange" data-toggle="tab">Orange</a></li>
        <li><a href="#yellow" data-toggle="tab">Yellow</a></li>
        <li><a href="#green" data-toggle="tab">Green</a></li>
        <li><a href="#blue" data-toggle="tab">Blue</a></li>
    </ul>
    <div id="my-tab-content" class="tab-content">
        <div class="tab-pane active" id="red">
            <h1>Red</h1>
            <p>red red red red red red</p>
        </div>
        <div class="tab-pane" id="orange">
            <h1>Orange</h1>
            <p>orange orange orange orange orange</p>
        </div>
        <div class="tab-pane" id="yellow">
            <h1>Yellow</h1>
            <p>yellow yellow yellow yellow yellow</p>
        </div>
        <div class="tab-pane" id="green">
            <h1>Green</h1>
            <p>green green green green green</p>
        </div>
        <div class="tab-pane" id="blue">
            <h1>Blue</h1>
            <p>blue blue blue blue blue</p>
        </div>
    </div>
</div>


<script type="text/javascript">
    jQuery(document).ready(function ($) {
        $('#tabs').tab();
    });
</script>    
</div> <!-- container -->


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

</body>
</html>
    0 讨论(0)
  • 渐次进展
    2020-12-04 11:37

    You're missing the data-toggle="tab" data-tag on your menu urls so your scripts can't tell where your tab switches are:

    HTML

    <ul class="nav nav-tabs" data-tabs="tabs">
    <li class="active"><a data-toggle="tab" href="#red">Red</a></li>
    <li><a data-toggle="tab" href="#orange">Orange</a></li>
    <li><a data-toggle="tab" href="#yellow">Yellow</a></li>
    <li><a data-toggle="tab" href="#green">Green</a></li>
    <li><a data-toggle="tab" href="#blue">Blue</a></li>
</ul>
    0 讨论(0)
 看不清?
提交回复
热议问题