-
-
Save mnewt/4228037 to your computer and use it in GitHub Desktop.
| <!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> |
NICE AND EASY!!!!
Thanks dude
Thanks!
Thanks! That's way better than the actual documentation...
Thanks!
Thank you!
Thanks for this example.
excellent key example
cool....! (Y)
Thanks a lot.. it really saved time.!!
Thanks a lot!
Why is this not working for me? I literally copied and pasted the whole thing and it still doesn't work. I don't know javascript, btw, only HTML/CSS, so I can't tell if I'm screwing something up there. Still, though, like I said, I literally copied and pasted the code, and I can't get the tabs to switch. The cool looking UI is there, but the tabs won't switch.
Hi all,
I have an issue with a similar page I am working on for work.
I'm pretty new to HTML and sort of picking it up as I go along and thrown myself into the deep end.
I am using nav-tabs but with 8 tabs in total.
My problem is that the last 2 tabs contents are displaying along the bottom of all the other tabs in IE.
Seems to be working fine in Chrome but cannot figure out what I have done wrong for is to display different in IE.
Any help would be appreciated, cheers
@craigmiller160 I am pretty sure this has to with some imports not coming in. Just open u r developer tools and check. One more thing jQuery is coming from a CDN so you should have internet when u open this html page, make sure u have the interent connection. :)
Awesome! Thank you!
How come the href doesn't work?? I copied and paste it. still when i click on other tabs, nothing happens... why?
The exact code above doesn't work. If you load a more recent version of jQuery (I used v1.12.3), you should be successful.
grafixgeek - I am using jquery-2.2.4 and bootstrap 3.3.6. It worked for me
you saved me an hour! Good job 👍
You are doing God's work my son.
Why I don't need to add $('#tabs').tab(); to work ?
Only works adding the library jquery "<script jquery... ></script>"
Thank's for the gist bro!
Thanks !
Hi, Thanks,
But, I have a doubt, `Is it possible to link a particular tab from another page?
Thanks! very nice job!
Helped me though the JQuery version needed idd to be changed, thanks a bunch !