Support » Plugin: WordPress Twitter Bootstrap CSS » Cannot link to tab

  • Resolved bennygill



    I’ve got the plugin installed and setup a tabbale nav on my wordpress post. This is what the code looks like:

    <div class="tabbable tabs-left">
    <ul class="nav nav-tabs">
    	<li class="active"><a href="#tab1">tab1</a>
    <li><a href="#tab2">tab2</a></li>
    <div class="tab-content">
    <div id="tab1" class="tab-pane active">
    Content of Intro tab...
    <div id="tab2" class="tab-pane">
    Content of middle tab...
    <a href="#tab1">LINK TO TAB 1</a>

    What I need is for a way to link to each tab. So if I’m in tab2 I want a way to link back to tab1 so that when it is clicked the page opens tab1.

    So I created a href to #tab1 but nothing happens when I click the link. The URL in my browser bar changes to but the webpage stays the same, nothing happens.

    What am I doing wrong?

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author Paul


    Hi Benny,

    You’re not doing anything wrong… this is a javascript/bootstrap issue in that this behaviour isn’t actually supported.

    Try adding this javascript to your page:

    <script type="text/javascript">
    	$( document ).ready(
    		function() {
    			$( 'a[rel=tab-shortcut]' ).on( 'click',
    				function() {
    					var $oThis = $( this );
    					var $oSearch = $( '.nav-tabs a[href="'+$oThis.attr('href')+'"]' );
    					if ( $oSearch.length > 0 ) {
    						$ 'show' );

    In the link you create in html it has to contain the following:
    <a href="#yourTabId" rel="tab-shortcut">Link text</a>

    The important part here is the rel=”tab-shortcut”. Without it, the javascript above wont fire.

    Let me know if that helps.

    Thanks for the help Paul.

    I tried that code but it didn’t work 🙁

    Plugin Author Paul


    Can you give me the exact code/html you used?

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Cannot link to tab’ is closed to new replies.