jquery tabs - load url in current tab?

Question

I'm trying to figure out how to load the url each tab links to inside the tab area onclick, and have been trying to following the docs at http://docs.jquery.com/UI/Tabs#...open_links_in_the_current_tab_instead_of_leaving_the_page, but am clearly not getting it....

This is the HTML markup:

<div class="tabs">
  <ul class="tabNav">
    <li><a href="/1.html#tabone">Tab One</a></li>
    <li><a href="/2.html#tabtwo">Tab Two</a></li>
    <li><a href="/3.html#tabthree">Tab Three</a></li>
  </ul>
</div> 

<div id="tabone"> 
     <!-- Trying to load content from 1.html in this div on click --> 
</div>

<div id="tabtwo"> 
     <!-- Trying to load content from 2.html in this div on click --> 
</div>

<div id="tabthree"> 
     <!-- Trying to load content from 3.html in this div on click --> 
</div>

And this is the jquery I'm trying to use:

$(".tabs").tabs({
    load: function(event, ui) {
            $('a', ui.panel).click(function() {
                    $(ui.panel).load(this.href);
                    return false;
                });
    }
    });

I know I've got some part of this wrong.... I've gone through several iterations (too many to post), and all I get is a blank div... I don't know... Feeling a bit confused here... Help?

Deepak · Accepted Answer · 2013-10-20 01:32:33Z

2

The page you reference is intended for loading links referenced on the tab in the current tab, not loading the tab itself from a link. You shouldn't need to use the load method to get links as tabs to work.

All you really should need is this (you can omit the tab container DIVS). I'm assuming that the other tabs are relative and represent the full tab contents so I've removed the leading / and the hash.

<div class="tabs"> 
  <ul class="tabNav"> 
    <li><a href="1.html" title="Tab One">Tab One</a></li> 
    <li><a href="2.html" title="Tab Two">Tab Two</a></li> 
    <li><a href="3.html" title="Tab Three">Tab Three</a></li> 
  </ul> 
</div>

<script type="text/javascript">
    $(function() {  // note wrap in 'ready" function to make sure DOM is loaded
        $('.tabs).tabs();
    });
</script>

edited Oct 20, 2013 at 1:32

Deepak

6,82718 gold badges71 silver badges121 bronze badges

answered Apr 23, 2010 at 15:38

tvanfosson

534k102 gold badges703 silver badges801 bronze badges

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

Comments

Hitesh Patel · Accepted Answer · 2011-09-07 07:04:59Z

0

And please make sure you add following JS code also after loading tabs.

$('#tabs ul li.ui-tabs-selected a').click(function(){
                location.href = $(this).attr('href');
                return false;
        }).css('cursor', 'pointer');

Cheers!!!

answered Sep 7, 2011 at 7:04

Hitesh Patel

3893 silver badges10 bronze badges

Collectives™ on Stack Overflow

jquery tabs - load url in current tab?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related