jQuery UI Tabs loading specific link within tab

Question

I want to load only links within a certain div inside the tab, otherwise it should just go to the actual link.

Current the code i use loads all links inside the content in the same tab

<script type="text/javascript">
      $(function(){
        $('#tabs').tabs({
          load: function(event, ui) {
            $('a', ui.panel).click(function() {
              var tabId=$('#tabs').tabs('option', 'selected');
             $('#tabs').tabs("url", tabId, this.href).tabs("load",tabId);
              return false;
            });
          }
        });
      }); 
</script>

Tab Page

    <div id="sresults" style="width: 520px">
    <div id="tabs">
        <ul>
            <li><a href="mylink.html">Songs</a></li>
            <li><a href="mylink.html">Albums</a></li>
            <li><a href="mylink.html">Videos</a></li>
            <li><a href="mylink.html">Entire Blog</a></li>
        </ul>
    </div>
</div>

And then heres the page inside the tab

<div id="content">
<a href="permalink.html">My links</a>
</div>

<div id="navi"><a href="tab?page=2">Next Page</a>
</div>

I want the links inside the navi div to load within the tab, but all links outside should go to the actual link

Are you sure ui.panel is a reference to a dom element/jqueryized element? — meder omuraliev
– meder omuraliev, Commented Oct 4, 2009 at 18:29

brianpeiris · Accepted Answer · 2009-10-06 04:10:37Z

2

I'm guessing you only want to load the navigation links inside the tab.

If so, just replace

$('a', ui.panel).click(function() {

With

$('#navi a', ui.panel).click(function() {

Although, I suggest you use a class to select your navigation div instead of using an id because you might end up with duplicate ids, which could cause problems later on.

answered Oct 6, 2009 at 4:10

brianpeiris

10.8k1 gold badge34 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

InvalidSyntax Over a year ago

Would it be possible to now have the page scroll back to the top of the tab?

brianpeiris Over a year ago

$('html').scrollTop(0); before return false; should do it. I'm not sure if that will work for anything other than Firefox and IE8 though.

Collectives™ on Stack Overflow

jQuery UI Tabs loading specific link within tab

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related