jquery选项卡嵌套选项卡的问题,第一个选项卡无法加载

时间:2009-12-21 18:59:15

标签: jquery ajax tabs

我遇到嵌套标签问题。当我点击Tab 2时,默认情况下我需要嵌套1来显示。相反,它只显示一个空白选项卡,直到我单击嵌套2并单击返回嵌套1。

我希望能够通过在可能的情况下向ready函数添加一些东西来解决这个问题,因为更改实际的.js文件是一件痛苦的事......感谢您的支持!

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').attr('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 个答案:

没有答案