Jquery Simple tabs

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">
      <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>
  <div class='tab1' >content for tab 1</div>
  <div class='tab2' >content for tab 2</div>
  <div class='tab3' >content for tab 3</div>

Open in new window





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


Who is Participating?
SRigneyConnect With a Mentor Commented:
The way to match tab links to divs is to use the rel attribute of the anchor tag and the id of the div.

This should work as a rough version.   You'd probably want to add styling so it's clear which tab is selected and which ones are not.
<div class="tabs">
      <li><a class='tab_link' rel='tab1' href='#'>Tab 1</a></li>
      <li><a class='tab_link' rel='tab2' href='#'>Tab 2</a></li>
      <li><a class='tab_link' rel='tab3' href='#'>Tab 3</a></li>
  <div id='tab1' class='tab'>content for tab 1</div>
  <div id='tab2' class='tab'>content for tab 2</div>
  <div id='tab3' class='tab'>content for tab 3</div>

  $this = $(this);  // this is the link that was clicked.
  // hide all tabs.
  $('#' + $this.attr('rel').val() ).show();  // show the clicked tab.

Open in new window

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.