5 minute code: JQuery Tabbed Interface

The JQuery UI library is awesome for doing super cool stuff super quick. For example, a tabbed interface! Who wants to reload after you click on a tab? No one. Who wants to take ages to code it? No one.

Therefore, welcome to TGC’s 5 minutes of code!

1. Make the tab links. 

Make sure they are in a div with an id of your choosing. The href for the anchor tag should map with the id of the content div (step 2).

<div id="tabs">
  <ul>
    <li><a href="#about" class="smoothScroll"> About</a> </li>
    <li><a href="#contact" class="smoothScroll"> Contact Us</a> </li>
  </ul>
</div>

2. Add the content. 

As you can see below, the div has the “about” id, which corresponds up above to the link that will hold the content for that tab.

<div id="about">
  <p>This is text inside a paragraph tag </p>
</div>

3. Add the JQuery UI library script tags to your HTML

Remember these go in the head section!

 <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
 <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
 <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

These can be obtained through the JQuery UI documentation.

4. Add this tiny bit of script.

In the head section or separately, however this is all you need:

 <script>
  $(function() {
    $("#tabs").tabs();
  });
  </script>

 

That’s it. As long as you’ve got things organized and properly named, this should be as quick as anything.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>