Cannot link to tab

  • Resolved bruceleebee

    (@bennygill)


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

    What am I doing wrong?

    https://www.ads-software.com/extend/plugins/wordpress-bootstrap-css/

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

    (@paultgoodchild)

    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.

    Thread Starter bruceleebee

    (@bennygill)

    Thanks for the help Paul.

    I tried that code but it didn’t work ??

    Plugin Author Paul

    (@paultgoodchild)

    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.