0

This is a great script that will work for several different instances of tabs on a page: 

     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

now for the 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>

Warning:this works great when you have <50 elements that load otherwise all that looping WILL give you errors and grief.

so the solution we tried that works runs like this: 

          <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>

Ugly, but it works.

I want to clean this up so I tried making these functions and they don't work:

  <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;
  }

Any ideas?

4

0 回答 0