WordPress.org

Ready to get started?Download WordPress

Forums

WordPress Twitter Bootstrap CSS
[resolved] Cannot link to tab (4 posts)

  1. bennygill
    Member
    Posted 1 year ago #

    Hello,

    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>
    <div id="tab2" class="tab-pane">
    Content of middle tab...
    <a href="#tab1">LINK TO TAB 1</a>
    </div>
    </div>
    </div>

    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 http://www.examplesite.com/#tab1 but the webpage stays the same, nothing happens.

    What am I doing wrong?

    http://wordpress.org/extend/plugins/wordpress-bootstrap-css/

  2. Paul G.
    Member
    Plugin Author

    Posted 1 year ago #

    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 ) {
    						$oSearch.tab( 'show' );
    					}
    				}
    			);
    
    		}
    	);
    </script>

    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.
    Paul.

  3. bennygill
    Member
    Posted 1 year ago #

    Thanks for the help Paul.

    I tried that code but it didn't work :(

  4. Paul G.
    Member
    Plugin Author

    Posted 1 year ago #

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

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic

Tags

No tags yet.