Tabs using j query

Click here to load reader

  • date post

  • Category


  • view

  • download


Embed Size (px)


Amber and Esther

Transcript of Tabs using j query

  • 1. Tabs using jQuery
    Esther Oh and Amber Chen

2. 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:
jQueryjavascript file
3. 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.

Text that will show on the tab

4. 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 tab

Create 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 list
this 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
5. Setting up the CSS
Specify the actual text of the tabs
Overflow hides the bullets that come with the list item
6. Setting up the CSS
Specifies the links in the list item in the unordered list
7. Setting up the CSS
Specifies what color the text turnswhen you hover over it
8. Setting up the CSS
This specifies the container holding the content
9. 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
10. Setting Up the JavaScript
Link thejQuery to the HTML file
Make another script tag
Dont forget you always need to have this when you work with jQuery
11. Setting Up the JavaScript
It first hides all content when the webpage loads
*Without specifying first, page will load both contents
Loads/shows the first list item and calls it active
Example of what it looks like when it first loads
It loads the first tab content
12. Setting Up the JavaScript
When you click the list items (tabs).
Removes the active class on the tab
Hides the current tab content
13. 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 dont want the browser to go to another page for it, so it stops the browser from going to another page to access the link
14. Setting Up the JavaScript
Your final JavaScript code should look similar to this:
15. Questions that Need to be Answered
How are they called?
What parameters do they require?
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