Have links to jqueryUI tabs in main navigation

Question

I have some jquery UI tabs on my page and I also have links to the tabs in my main navigation. This way a user can click a link and got to a particular tab from anywhere on the site.

This all works fine from the other pages of the site however if I use the main navigation links while on the same page the tabs are on it will not change tabs.

I created a js fiddle to help explain:

http://jsfiddle.net/8zpx9gce/1/

In the fiddle if you click on any of the links in "My Menu" section the tab will not change. Any Idea why this is working to link from other pages but on the page the tabs live the tab will not change?

<div>
    <h2>My Menu</h2>
    <a href="#tabs-1">tab 1</a>
    <a href="#tabs-2">tab 2</a>
    <a href="#tabs-3">tab 3</a>
</div>
<h2>End My Menu</h2>
<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Nunc tincidunt</a></li>
    <li><a href="#tabs-2">Proin dolor</a></li>
    <li><a href="#tabs-3">Aenean lacinia</a></li>
  </ul>
  <div id="tabs-1">
    <p>Proin elit arcu, rutrum commodo, vehicula tempus</p>
  </div>
  <div id="tabs-2">
    <p>Morbi tincidunt, dui sit am.</p>
  </div>
  <div id="tabs-3">
    <p>Mauris eleifend est et turpis. Aliquam vulputate, pede </p>
    <p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper a</p>
  </div>
</div>

$(function() {
    $( "#tabs" ).tabs();
  });

I would check out the [jqueryUI api](http://api.jqueryui.com/tabs/), it gives you some info requirements, limitations, etc. Specifically that the tabs need to be inside a ul or ol — TheHuman Wall, Jul 15 '15 at 19:39
possible duplicate of [How do I open a tab from with jQuery UI Tabs from an link outside of the div?](http://stackoverflow.com/questions/14383674/how-do-i-open-a-tab-from-with-jquery-ui-tabs-from-an-link-outside-of-the-div) — Brant Olsen, Jul 15 '15 at 19:40
Thanks @BrantOlsen that helped me get ti going. The solution is slightly different due to new version of jquery UI not allowing selection by href so i will post the working code below. — Aaron, Jul 15 '15 at 20:26

score 0 · Accepted Answer · answered Jul 15 '15 at 20:31

Got it working with the code below. To get it working you need to listen to the click event of the link then get the href and then the index of the tab. From there you can select it.

http://jsfiddle.net/8zpx9gce/3/

 $(function() {
        $( "#tabs" ).tabs();
      });
    $('.open-tab').click(function (event) {
        var href = $(this).attr('href');
        var index = $('#tabs a[href="'+ href +'"]').parent().index();
            $('#tabs').tabs("option", "active",index);
        });


<div>
    <h2>My Menu</h2>
    <a href="#tabs-1" class="open-tab">tab 1</a>
    <a href="#tabs-2" class="open-tab">tab 2</a>
    <a href="#tabs-3" class="open-tab">tab 3</a>
</div>
<h2>End My Menu</h2>
<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Nunc tincidunt</a></li>
    <li><a href="#tabs-2">Proin dolor</a></li>
    <li><a href="#tabs-3">Aenean lacinia</a></li>
  </ul>
  <div id="tabs-1">
    <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
  </div>
  <div id="tabs-2">
    <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
  </div>
  <div id="tabs-3">
    <p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p>
    <p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p>
  </div>
</div>

Have links to jqueryUI tabs in main navigation

1 Answers1