Well, almost – but the required effect is achieved.
The problem with using anchors in a dynamic web page is that you don’t always want to show the corresponding href in the browser’s status bar when the user hovers over the anchor link.
Twitters Bootstrap navigation tabs are designed to work with anchor elements. I wanted to use these tabs without showing the corresponding anchor links in the browser’s status bar.
solution is as follows (the assumption is that bootstrap.css is included of course):
Add this to your CSS file:
.link { cursor:pointer; color:blue; }
And create the tabs as follows:
<ul class="nav nav-tabs">
<li id="tab1" class="active">
<a>
<span class="link" onClick="firstTab()">
First Tab
</span>
</a>
</li>
<li id="tab2">
<a>
<span class="link" onClick="secondTab()">
Second Tab
</span>
</a>
</li>
</ul>
Just add the corresponding DIVs and make them hidden or shown accordingly in the event that a tab is clicked.
Per Nick’s request, here’s a small self contained example for one way of accomplishing the above:
<!DOCTYPE html> <head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <script> function firstTab() { putTabText("<br/> Hi, I'm the content of <b>Tab1</b>"); } function secondTab() { putTabText("<br/> ... and I'm the content of <b>Tab2</b>"); } function putTabText(str) { document.getElementById('idContent').innerHTML = str; } </script> </head> <html> <style> .link { cursor:pointer; color:blue; </style> <body onLoad='firstTab()'> <div class="container"> <ul class="nav nav-tabs"> <li id="tab1" class="active"> <a> <span class="link" onClick="firstTab()"> First Tab </span> </a> </li> <li id="tab2"> <a> <span class="link" onClick="secondTab()"> Second Tab </span> </a> </li> </ul> <div id='idContent'></div> </div> </body> </html>
Hi there
I’ve tried this out on a bootstrap template and it seems to work great for stopping annoying javascript problems with the smooth scrolling and anchors.
As I’m a total novice though, I was wondering how you can actually do the last bits of what you recommend, in specific how do I add the content divs and especially how do I hide or show them based on the event.
Can you please add a plain example?
Many thanks,
Nick
You got it. Updated the post accordingly 🙂