Question

这是一个很棒的脚本，适用于页面上几个不同的标签实例：

     jQuery('.tab_container').each(function(){

    var select = jQuery(this);
select.find('.detail').hide(); 
select.find('.detail:first').show(); 
select.find('div.tab_nav a:first').addClass('current_tab'); 

    select.find('div.tab_nav a').click(function(){ 
    var currentTab = select.find(jQuery(this).attr('href')); 
    select.find('div.tab_nav a').removeClass('current_tab');
    jQuery(this).addClass('current_tab'); 
    select.find('div.tab_nav a').addClass('other_tab');
    jQuery(this).removeClass('other_tab'); 
    select.find('.detail').hide(); 
    jQuery(currentTab).show(); 
    return false;
    });//link action  

});//each

现在为html：

   div class="tab_nav">

  <a href=".tab1" class="current_tab">Properties</a>

<a href=".tab2" class="other_tab" >Detail</a>
</div>


<div class="detail tab1">

 <div class="datarow">
   content 1
  </div>

 <div class="detail tab2">

   <div class="datarow">
 content 2
  </div>

警告：当你有<50个元素加载否则所有循环会给你带来错误和悲伤时，这很有效。

所以我们尝试的解决方案运行如下：

          <a href=".tab1" class="current_tab" onclick="showInfo('click', this, '${element.id}','${element.id.id}', 'list');jQuery(this).siblings().removeClass('current_tab'); jQuery(this).addClass('current_tab');jQuery(this).siblings().addClass('other_tab');jQuery(this).removeClass('other_tab');jQuery(this).parent().siblings('.tab1').show();jQuery(this).parent().siblings('.tab2').hide(); return false;">Properties</a>
          <%-- --%>
          <a href=".tab2" class="other_tab"
                 onclick="showInfo('click', this, '${element.id}','${element.id.id}', 'list');jQuery(this).siblings().removeClass('current_tab'); jQuery(this).addClass('current_tab');jQuery(this).siblings().addClass('other_tab');jQuery(this).removeClass('other_tab');jQuery(this).parent().siblings('.tab2').show();jQuery(this).parent().siblings('.tab1').hide(); return false;">Detail</a>
   </div>

丑陋，但它确实有效。

我想要清理它，所以我尝试制作这些功能而它们不起作用：

  <script>

  function showTabOne(){
  jQuery(this).siblings().removeClass('current_tab');
   jQuery(this).addClass('current_tab');
  jQuery(this).siblings().addClass('other_tab');
  jQuery(this).removeClass('other_tab');
  jQuery(this).parent().siblings('.tab1').show();
  jQuery(this).parent().siblings('.tab2').hide();     
  }
 function showTabTwo(){
  jQuery(this).siblings().removeClass('current_tab');
  jQuery(this).addClass('current_tab');
  jQuery(this).siblings().addClass('other_tab');
  jQuery(this).removeClass('other_tab');
  jQuery(this).parent().siblings('.tab2').show();
  jQuery(this).parent().siblings('.tab1').hide();
  return false;
  }

有什么想法吗？

jQuery选项卡导航多个服务器生成的元素

0 个答案: