Link to home
Start Free TrialLog in
Avatar of jdav357
jdav357

asked on

Jquery Simple tabs

Hi,
I have to do a highly customized tabbed interface. I *dont* want to use the Jquery ui tabs - they're nice, but I need to do my own.
I am looking for ideas on how to implement this.

I am going to do something like:

<div class="tabs">
  <ul>
      <li><a class='tab1_link' href='#'>Tab 1</a></li>
      <li><a class='tab2_link' href='#'>Tab 2</a></li>
      <li><a class='tab3_link' href='#'>Tab 3</a></li>
  </ul>
  <div class='tab1' >content for tab 1</div>
  <div class='tab2' >content for tab 2</div>
  <div class='tab3' >content for tab 3</div>
</div>

Open in new window



$('.tab2').hide();
$('.tab3').hide();

$('.tab1_link').click(function(e){
  $('.tab1').show()
  $('.tab1').siblings().hide()
  e.preventDefault();
})

$('.tab2_link').click(function(e){
  $('.tab2').show()
  $('.tab2').siblings().hide()
  e.preventDefault();
})

$('.tab3_link').click(function(e){
  $('.tab3').show()
  $('.tab3').siblings().hide()
  e.preventDefault();
})

Open in new window


This is just my initial idea, the problem is that it doesnt scale - for every link I'd have to write a new function. The problem is that I don't know how to match a tabs link to a particular content div in a programmatic way.

Can anyone suggest a better way of achieving the above??

Cheers
John



ASKER CERTIFIED SOLUTION
Avatar of SRigney
SRigney
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial