Tabs using jQuery

Esther Oh and Amber Chen

Objectives You will be able to create tabs on a

webpage that will: Break content into multiple sections that

can be swapped

You will need to have: Html Css jQuery javascript file

Setting up the body in HTML (pt.1)Create an unordered list and add a class called “tabs”Add a list item for every tab you want

In each list item, create a link to your tab.

Ex)<li><a href=“#namehere”>Text that will show on the tab</a></li>

Setting up the body in HTML (pt.2)Create div with a class named “tab_container”•This is the container that holds all the text that will appear when you click a tabCreate divs for each tab you created in the unordered list

The id must match the link to the tab without the #

Add a class called “tab_content”•This is the actually text that the tab_container holds

Setting up the CSS

Specify the tabs in the unordered listthis will modify the actual tabs on

the page

Margin and Padding – must be zero or the tabs will separate from each other

you want them to be side by side to look visually appealing

Width – set it as a percentage to make it fluid

Setting up the CSS

Specify the actual text of the tabs

Overflow hides the bullets that come with the list item

Setting up the CSS

Specifies the links in the list item in the

unordered list

Setting up the CSS

Specifies what color the text turns

when you hover over it

Setting up the CSS

This specifies the container holding

the content

Setting up the CSS

This specifies the actual text in the container.The padding goes around all of the text to make it look visually appealing

Setting Up the JavaScript

Link the jQuery to the HTML file

Make another script tag

Don’t forget you always need to have this when you work with jQuery

Setting Up the JavaScript

It first hides all content when the webpage loads

Loads/shows the first list item and calls it active

*Without specifying first, page will load both contents

It loads the first tab content

Example of what it looks like when it first loads

Setting Up the JavaScript

When you click the list items (tabs)….

Removes the active class on the tab

Hides the current tab content

Setting Up the JavaScript

Make a variable that represents the link in the tab that you have clicked.

Make a selector for the variable, and make it fade in or show so when you click the tab, you let the content fade in or show Add a return false because when you have a link, you don’t want the browser to go to another page for it, so it stops the browser from going to another page to access the link

Setting Up the JavaScriptYour final JavaScript code should look similar to this:

Questions that Need to be Answered How are they called?

.click() .ready() .fadeIn() .hide() .find()

What parameters do they require? .fadeIn(slow/normal/fast) .hide(slow/normal/fast)

What is different about a particular variation? What does the code look like? When would it be appropriate to use? Provide an example of its use