开发者

Issues with jquery tabs nested tabs, first tab doesn't load

I am having a problem with nested tabs. When I click on Tab 2 I need Nested 1 to display by default. Instead it just shows a blank tab until I click Nested 2 and click back to Nested 1.

I'd love to be able to fix this by just adding something to the ready function if possible because changing the actual .js file is a pain... Thanks in advanace!

HTML:

<!--Begin Tabs-->

<div id="tab-container1">

 <ul class="tabs">
  <li><a href="#tab-1">Tab 1</a></li>
  <li><a href="#tab-2">Tab 2</a></li>
  <li><a href="#tab-3" rel="external-4.html">Tab 3</a></li>
 </ul>

<div class="tab-panel">

<div id="tab-1">Tab 1 Content</div>


<div id="tab-2">
 <!--BEGIN NESTED TABS-->
 <div class="tab-carousel">
  <div id="tab1-N">

    <ul id="ul-N" class="tabs-nested">
     <li><a href="#tab1-a" rel="external-1.html">Nested 1</a></li>
     <li><a href="#tab1-b" rel="external-2.html">Nested 2</a></li>
     <li><a href="#tab1-c" rel="external-3.html">Nested 3</a></li>
    </ul>

    <div class="tab-panel-nested">

     <div id="tab1-a">Nested Tab One Content</div>
     <div id="tab1-b">Nested Tab Two Content</div>
     <div id="tab1-c">Nested Tab Three Content</div>

   </div>
  </div>
 </div>
 <!--END NESTED TABS-->    
</div>


<div id="tab-3">Tab 3 Content</div>

</div>
</div>
<!--End Tabs-->

<script type="text/javascript">
jQuery(document).ready(function(){

$('#tab-container1 ul').tabs();
});

</script>

JS:

jQuery.fn.tabs = function () {
  return this.each(function () {
    var ul = jQuery(this);



    ul.find('a[href^=#]').each(function (i) {
      var tablink = jQuery(this);

      if (i) {
        jQuery(tablink.attr('href')).hide();

      }
      else {
        tablink.addClass('current');
      }

      tablink.click(function () {
        jQuery(ul.find('a.current').removeClass('current').attr('href')).hide();
        jQuery(tablink.addClass('current').a开发者_Go百科ttr('href')).show();
        if(tablink.attr('rel')){
          $("#tab-preloader").show();
          $.ajax(
            {
              url: tablink.attr('rel'),
              cache: false,
              success: function(message)
              {
              jQuery(tablink.attr('href')).empty().append(message);
              $("#tab-preloader").hide();
              }
            });
        };

        return false;
      });
    });
  });
};
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜