There are various scripts to create tab effect, many of them use jQuery or other JavaScript framework, but I wanted to make one by myself.
In this page is a script for tabs effect created with HTML, CSS, and pure JavaScript.
The innovation in this code is the fact that if the page is refreshed, it will keep displayed the last active /opened tab. For this feature it uses the sessionStorage JavaScript object. If you want to not use this feature, just comment /delete this line of code:
sessionStorage.setItem('activetab', this.id);
- Here is the complete code: HTML, CSS, JavaScript (click on the code to select it).
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Tabs effect with HTML, CSS, JavaScript</title>
<style type="text/css">
/* Tabs */
#tabs{
position:relative;
 margin:2em auto 2em 8%;
 width:22em;
 background-color:#d0d1fe;
 padding:0 .15em 0 .5em;
 -moz-border-radius:.6em;
 -webkit-border-radius:.6em;
 -khtml-border-radius:.6em;
 border-radius:.6em;
}
#tabs li{
 display:inline;
 margin:auto .2em;
 border:1px solid #adadda;
 background-color:#e6e7fe;
 padding:.35em;
 font-size:1em;
 font-weight:700;
 cursor:pointer;
}
#tabs li.tabvi{
 background-color:#d1fdd2;
 border:1px solid #b7f3b8;
 -moz-border-radius:1px;
 -webkit-border-radius:1px;
 -khtml-border-radius:1px;
 border-radius:1px;
}
#tabs li:hover{
 border:1px dotted #adadda;
 background-color:#f9f9b8;
 text-decoration:underline;
 color:#0102d8;
}
/* Tabs content */
#tb0_c, #tb1_c, #tb2_c, #tb3_c {
 position:relative;
 margin:.1em 2%;
 background:#fbfbe1;
 padding:.3em 3%;
 -moz-border-radius:.9em;
 -webkit-border-radius:.9em;
 -khtml-border-radius:.9em;
 border-radius:.9em;
}
#tb1_c, #tb2_c, #tb3_c { display: none; }
</style>
</head>
<body>

<ul id="tabs">
  <li id="tb0" class="tabvi">Tab 1</li>
  <li id="tb1">Tab 2</li>
  <li id="tb2">Tab 3</li>
  <li id="tb3">Tab 4</li>
</ul>

<div id="tb0_c">Content: ...<br>Web site: https://coursesweb.net/ - Web development, free courses.</div>
<div id="tb1_c">Content: ...<br>Web site: https://marplo.net/ - Web development, foreign languages, games.</div>
<div id="tb2_c">Content: ...<br>Web site: http://php.net/ - PHP official website.</div>
<div id="tb3_c">Content: ...<br>Web site: http://www.google.com/ - Global search engine portal.</div>

<script>
  /* Tabs effect ( https://coursesweb.net/ ) */

// sets active tab, hides tabs content and shows content associated to current active tab
// receives the number of tabs, and the id of active tab
function tabsCnt(nr_tabs, av_tab) {
  document.getElementById('tabs').querySelector('.tabvi').removeAttribute('class');
  if(document.getElementById(av_tab)) document.getElementById(av_tab).setAttribute('class', 'tabvi');
  for(var i=0; i<nr_tabs; i++) document.getElementById('tb'+ i +'_c').style.display = 'none';
  if(document.getElementById(av_tab +'_c')) document.getElementById(av_tab +'_c').style.display = 'block';
}

// get the tabs elements
var ultabs = document.getElementById('tabs').querySelectorAll('li');
var nr_ultabs = ultabs.length;

// See if we have an activetab value (this will only happen if the page is refreshed)
if(sessionStorage.getItem('activetab')) {
  tabsCnt(nr_ultabs, sessionStorage.getItem('activetab'));
}

// registers click for tabs
for(var i=0; i<nr_ultabs; i++) ultabs[i].addEventListener('click', function(){
  tabsCnt(nr_ultabs, this.id);

  // stores the id of the current active tab
  sessionStorage.setItem('activetab', this.id);
}, false);
</script>

</body>
</html>

• Demo (click on Tabs, then refresh the page, the last opened tab will remain active):
Content: ...
Web site: https://coursesweb.net/ - Web development, free courses.
Content: ...
Web site: https://marplo.net/ - Web development, foreign languages, games.
Content: ...
Web site: http://php.net/ - PHP official website.
Content: ...
Web site: http://www.google.com/ - Global search engine portal.

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which meta tag provides a short description of the page?
<meta content="..."> <meta description="..."> <meta http-equiv="...">
<meta name="description" content="70-160 characters that describes the content of the page" />
Which CSS property is used to stop the wrapping effect of the "float"?
clear text-align position
#some_id {
  clear: both;
}
Click on the method which gets an array with all the elements in the document that have a specified tag name.
getElementsByName() getElementById() getElementsByTagName()
var divs = document.getElementsByTagName("div");
var nr_divs = divs.length;
alert(nr_divs);
Indicate the PHP function which returns the number of elements in array.
is_[) count() strlen()
$arr =[7, 8, "abc", 10);
$nri = count($arr);
echo $nri;        // 4
Creating Tabs Effect with JavaScript

Last accessed pages

  1. Get the value of the selected /checked checkboxes in a form (41480)
  2. Contact page - CoursesWeb (21842)
  3. Tabs effect with CSS (22547)
  4. Get and Modify content of an Iframe (18305)
  5. Making DIV Contents Scroll Horizontally, with multiple Div`s inside (28871)

Popular pages this month

  1. Making DIV Contents Scroll Horizontally, with multiple Div`s inside (1391)
  2. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (1361)
  3. Contact page - CoursesWeb (1342)
  4. Tabs effect with CSS (1342)
  5. Insert, Select and Update NULL value in MySQL (843)