Tie it Together using jQuery, Page 1 | DumpsterDoggy Tutorials

Bookmark This

Tie it Together using jQuery

By: Chris Missal

Page 1

Page 1

This is an example extending upon the previous tutorial I posted. This allows you to use tabbed boxes in 10 lines of jQuery code. Neat huh? The tabs in this example aren't as important as the usage of the rel attribute you'll see later.

Description
Related Items
Images

Description

Here's the description. This would be something to describe whatever item we're describing... yeah.

More Images

Images would be here if I wanted to add them. *wink*

The HTML is semantic and pretty simple. Not a lot going on in there. Notice how the <rel> tags contain jQuery ID selectors.


<ul id="infoTabs">

  <li class="active" rel="#infoDescription">

    <span>Description</span></li>

  <li class="" rel="#infoRelatedItems">

    <span>Related Items</span></li>

  <li class="" rel="#infoImages">

    <span>Images</span></li>

</ul>

<div id="infoBoxes">

  <div class="active" id="infoDescription">

    <h5>Description</h5>

    <p>Here's the description. This would 

    be something to describe whatever item we're 

    describing... yeah.</p>

  </div>

  <div class="" id="infoRelatedItems">

    <h5>Related Items</h5>

    <ul>

      <li>Something similar</li>

      <li>This one is cheaper</li>

      <li>A different size</li>

    </ul>

  </div>

  <div class="" id="infoImages">

    <h5>More Images</h5>

    <p>Images would be here if I wanted 

    to add them. *wink*</p>

  </div>

</div>

Here you'll notice a couple things. The first part of the hover function only works if the element doesn't have the active class. This is my preference for usability, I feel that a hover implies clickability. The other is the $($(this).attr("rel")) part. We're just telling jQuery to look for the element with the ID that is the same as the current element's rel attribute. Tie it together right? I've found this to be very useful to link an element to another one pretty simply.


$(document).ready(function() {

  $("#infoTabs li").hover(function() {

    if(!$(this).hasClass("active"))

        $(this).addClass("hover");

  }, function() {

    $(this).removeClass("hover");

  }).click(function() {

    $(this).addClass("active").removeClass("hover").siblings().removeClass("active");

    $($(this).attr("rel")).addClass("active").siblings().removeClass("active");

  });

});

Page 1