Create tab with html

How do I make a tabbed view in HTML?

When clicking on tab A, show content for tab A. Click on tab B, show content for tab B, and so on. What’s the most simple and compatible way of constructing a HTML snippet? I don’t mean to use any libraries here, so none of jQuery or any other libraries.

9 Answers 9

If you want to roll your own tab control, you could do something like this:

According to w3.org/TR/2000/WD-DOM-Level-1-20000929/…, there are 12 possibilities. Checking for 1 mainly keeps us from getting the attribute and text nodes that may belong to the tab page divs.

Here is a list of different types of tabs plus tutorials on how to build them

TabTastic is a good guide — it is accessible, and (when JavaScript is not available) fails very gracefully.

If you want to implement your own tab view, just do it like this:

Take a look at an example such as this (courtesy of a Google search for ‘tabbed view javascript’).

You can obviously use this with a little customisation, but it’s instructive to take it apart and determine what it’s doing. It’s basically enabling or disabling using the display style and setting it to block or none

If «simple and compatible» are your only two criteria, I’d suggest the jQuery UI Tabs plugin. Cross-browser, and a cinch to implement.

Depending on your ambitions, it could simply be a matter of an unordered list and a number of s (tab contents). Then a simple JavaScript could — by means of getElementById() — set the display property for all the s: none for all except the current.

Alternatively, you could have a look at this.

Edit: Not the only one linking to the jQuery site, it seems 🙂

The jQuery tabs widget works completely on the browser side — content for all tabs are sent on every request, or you could write JavaScript code that uses Ajax to load the tab contents dynamically.

But it might not be appropriate for your use. Consider if you need to control the tabs server-side (that is, a click on a tab sends a new page request to the server — the server constructs HTML that has the visual appearance of tabs).

Источник

How TO — Full Page Tabs

Learn how to create full page tabs, that covers the entire browser window, with CSS and JavaScript.

Full Page Tabs

Click on the links to display the «current» page:

Home

Home is where the heart is..

News

Contact

Get in touch, or swing by for a cup of coffee.

About

Who we are and what we do.

Create One Page Tabs

Step 1) Add HTML:

Example

Create buttons to open specific tab content. All elements with class=»tabcontent» are hidden by default (with CSS & JS). When the user clicks on a button — it will open the tab content that «matches» this button.

Step 2) Add CSS:

Style the links and the tab content (full page):

Example

/* Set height of body and the document to 100% to enable «full page tabs» */
body, html height: 100%;
margin: 0;
font-family: Arial;
>

/* Style tab links */
.tablink background-color: #555;
color: white;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
font-size: 17px;
width: 25%;
>

.tablink:hover background-color: #777;
>

/* Style the tab content (and add height:100% for full page content) */
.tabcontent color: white;
display: none;
padding: 100px 20px;
height: 100%;
>

Step 3) Add JavaScript:

Example

function openPage(pageName, elmnt, color) <
// Hide all elements with by default */
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName(«tabcontent»);
for (i = 0; i < tabcontent.length; i++) <
tabcontent[i].style.display = «none»;
>

// Remove the background color of all tablinks/buttons
tablinks = document.getElementsByClassName(«tablink»);
for (i = 0; i < tablinks.length; i++) tablinks[i].style.backgroundColor = "";
>

// Show the specific tab content
document.getElementById(pageName).style.display = «block»;

// Add the specific color to the button used to open the tab content
elmnt.style.backgroundColor = color;
>

// Get the element with and click on it
document.getElementById(«defaultOpen»).click();

Tip: Also check out How To — Tabs.

Источник

How TO — Tabs

Tabs are perfect for single page web applications, or for web pages capable of displaying different subjects:

London

London is the capital city of England.

Paris

Paris is the capital of France.

Tokyo

Tokyo is the capital of Japan.

Create Toggleable Tabs

Step 1) Add HTML:

Example

Create buttons to open specific tab content. All elements with class=»tabcontent» are hidden by default (with CSS & JS). When the user clicks on a button — it will open the tab content that «matches» this button.

Step 2) Add CSS:

Style the buttons and the tab content:

Example

/* Style the tab */
.tab overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
>

/* Style the buttons that are used to open the tab content */
.tab button background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
>

/* Change background color of buttons on hover */
.tab button:hover background-color: #ddd;
>

/* Create an active/current tablink class */
.tab button.active background-color: #ccc;
>

/* Style the tab content */
.tabcontent display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
>

Step 3) Add JavaScript:

Example

function openCity(evt, cityName) <
// Declare all variables
var i, tabcontent, tablinks;

// Get all elements with and hide them
tabcontent = document.getElementsByClassName(«tabcontent»);
for (i = 0; i < tabcontent.length; i++) tabcontent[i].style.display = "none";
>

// Get all elements with and remove the class «active»
tablinks = document.getElementsByClassName(«tablinks»);
for (i = 0; i < tablinks.length; i++) tablinks[i].className = tablinks[i].className.replace(" active", "");
>

// Show the current tab, and add an «active» class to the button that opened the tab
document.getElementById(cityName).style.display = «block»;
evt.currentTarget.className += » active»;
>

Fade in Tabs:

If you want to fade in the tab content, add the following CSS:

Example

.tabcontent <
animation: fadeEffect 1s; /* Fading effect takes 1 second */
>

/* Go from zero to full opacity */
@keyframes fadeEffect from
to
>

Show a tab by default

To open a specific tab on page load, use JavaScript to «click» on the specified tab button:

Example

Close a tab

If you want to close a specific tab, use JavaScript to hide the tab with a click of a button:

Example

Tip: Also check out How To — Vertical Tabs.

Источник