Question

22

Bootstrap tab with content not working

rated 0 times [ 26] [ 4] / answers: 1 / hits: 22605 / 9 Years ago, wed, september 16, 2015, 12:00:00

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=http://maxcdn.bootstrapcdn.com/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.com/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.com/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

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

eden

Add To Favorites

Follow

Total Points: 730

Total Questions: 117

Total Answers: 117

Location: Peru

Member since Fri, Oct 14, 2022

2 Years ago

eden questions

1 Implementing advanced pagination to my react site using react-bootstrap

Thu, Mar 11, 21, 00:00, 3 Years ago

1 Dynamically access Vue component data variable names

Sun, Mar 7, 21, 00:00, 3 Years ago

1 How to test arrow function calling in react component with jest?

Wed, Dec 9, 20, 00:00, 4 Years ago

1 npm run test - unsafe-perm in lifecycle

Mon, Jul 27, 20, 00:00, 4 Years ago

1 How to remove the item from the local storage by clicking on div?

Thu, Dec 5, 19, 00:00, 5 Years ago

View All

answered 9 Years ago khalidkendelld · Accepted Answer

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.com/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.com/jquery-1.11.3.min.js></script>

  <script src=https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js></script>





</body>



</html>