javascript - Bootstrap tab with content not working

Completely new to HTML and CSS but I found code on this site for tabs with content that I would love to use as it is perfect for what I need, however I can't get it to work. I checked all the answers and followed every advise giving, including the ordering of the links/script tags but it is still not working. It worked perfect in all the jfiddle code but not for me

<!DOCTYPE html>
<html lang="en">
<head>

<link rel="stylesheet" href=".3.5/css/bootstrap.min.css">  
<script type="text/javascript" src="libraries/jquery.js"></script>
<script type="text/javascript" src="assets/twitterbootstrap/js/bootstrap-tab.js"></script>
<script src=".3.5/js/bootstrap.min.js"></script> 
<title>TEST tabs</title>

</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">
$(document).ready(function () {
    $('#tabs').tab();
});
</script>    
</div> <!-- container -->


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

</body>
</html>

The only difference I found was this link I am using "link rel="stylesheet" href=".3.5/css/bootstrap.min.css""

Without this, the page does not display as tags. Is there another link I can use that will do the same job and get the code to work? Or is there an alternative way to get this working?

Help is much appreciate, thank you

<!DOCTYPE html>
<html lang="en">
<head>

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn./bootstrap/3.3.5/css/bootstrap.min.css">  
<script type="text/javascript" src="libraries/jquery.js"></script>
<script type="text/javascript" src="assets/twitterbootstrap/js/bootstrap-tab.js"></script>
<script src="https://maxcdn.bootstrapcdn./bootstrap/3.3.5/js/bootstrap.min.js"></script> 
<title>TEST tabs</title>

</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">
$(document).ready(function () {
    $('#tabs').tab();
});
</script>    
</div> <!-- container -->


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

</body>
</html>

The only difference I found was this link I am using "link rel="stylesheet" href="http://maxcdn.bootstrapcdn./bootstrap/3.3.5/css/bootstrap.min.css""

Without this, the page does not display as tags. Is there another link I can use that will do the same job and get the code to work? Or is there an alternative way to get this working?

Help is much appreciate, thank you

Share Improve this question edited Sep 16, 2015 at 7:46 Michel 4894 silver badges11 bronze badges asked Sep 16, 2015 at 7:04 Siobhan Holubicka 1571 gold badge6 silver badges17 bronze badges

Remove two bootstrap.js. One is in head and other one is before </body> . Then check console in debugger. – CodeRomeos Commented Sep 16, 2015 at 7:06
try puting the bootstrap.js in the header – jayD Commented Sep 16, 2015 at 7:07
where is your jquery please bootstrap.js need jquery to perform so add it in the end of body tag – Amit singh Commented Sep 16, 2015 at 7:09
@jayD that is already there in head in minified version. <script src="https://maxcdn.bootstrapcdn./bootstrap/3.3.5/js/bootstrap.min.js"></script> – CodeRomeos Commented Sep 16, 2015 at 7:10

Add a ment |

2 Answers 2

Sorted by: Reset to default 7

Check this it will help you..

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <title>Bootstrap, from Twitter</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta name="description" content="" />
  <meta name="author" content="" />
  <!-- Le styles -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn./bootstrap/3.3.5/css/bootstrap.min.css">
  <style>
  </style>
</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>
    <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 src="https://code.jquery./jquery-1.11.3.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn./bootstrap/3.3.5/js/bootstrap.min.js"></script>


</body>

</html>

Maybe you use an old jQuery version. I tried it with the jQuery CDN. You don't need twitter bootstrap for this and the script at the bottom of your script is not necessary to. Here's your correct code. Try it. I have tested it and it worked.

<!DOCTYPE html>
<html lang="en">
<head>

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn./bootstrap/3.3.5/css/bootstrap.min.css">  
<script type="text/javascript" src="https://code.jquery./jquery-2.1.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn./bootstrap/3.3.5/js/bootstrap.min.js"></script> 
<title>TEST tabs</title>

</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">
$(document).ready(function () {
    $('#tabs').tab();
});
</script>    
</div> <!-- container -->



</body>
</html>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Bootstrap tab with content not working - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)