CODEWITHSUNDEEP
javascripthtmlcss
user1423798
user1423798

Reputation: 29

Dynamic Tabs - Link works only if clicked

So i have tried this tutorial and the tabs work flawlessly:

http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_tabs_dynamic&stacked=h

But the problem is as follows:

I am able to click on the tabs and navigate, but if i use the link directly to a specific tab, it will open the first (default) tab.

Example:

Appending #menu2 does not open the tab assigned with the id #menu2 when visiting the link http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_tabs_dynamic&stacked=h#menu2

Thank you!

Upvotes: 1

Views: 67

Answers (3)

Markus Rohlof
Markus Rohlof

Reputation: 430

That's because bootstraps menu works through javascript, not through the actual anchors.

When clicking on a tab a javascript function is activated that sets an active class on the tab and the content pane, which will cause the tab to be highlighted and the content to be display: block and not display: none anymore (which is the default).

You would have to read the anchor from the URL when generating the page and then set the active classes depending on that.

Addition: Alternatively you could use the javascript snippet as suggested by @VirginieLGB, but then you will have a short moment of transition every time the page is loaded. Especially when you have a bigger page that takes longer to load, you may have to wait a little for the document to be "ready" so the function starts working. In that timespan, the first tab will be displayed before transitioning and showing the second tab.

Upvotes: 1

Jon Underwood
Jon Underwood

Reputation: 1

I think what you are asking is: When you click a tab you want a new page to open and the active tab to be shown.

The css indicates the active tab as having the class .active you will need to append the .active class to the relevant tab on the newly opened page.

Upvotes: 0

VirginieLGB
VirginieLGB

Reputation: 548

Maybe you should try this:

$( document ).ready( function( ) {
  var hash = document.location.hash;
  if( hash.length > 1 ) {
    $( "a[href='" + hash + "']" ).trigger( "click" );
  }
} );

It checks if there is a hash when the document opens, and then clicks on the correct link

If you add it in between "<script></script>" in the "tryit", and click on "See results", you'll see it happen. Ex: hash=menu3

Upvotes: 2

Related Questions