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>
