pure js tabs

simple Javascript tabs

by Sanjay Ingole

HTML

<h1>Modular App Configuration</h1>

<ul id="tabs">
  <li><a href="#about">Search</a></li>
  <li><a href="#advantages">Unbranded Apps</a></li>
  <li><a href="#usage">Branded Apps</a></li>
</ul>

<div class="tabContent" id="about">
  <h2>Search App</h2>
  <div>
    <p>Search with Company Code or Name</p>
    <div id="smartSearchSearchDiv" class="createUserFieldContainer">
								<form id="mobileSmartSearchConfig" action="/dlPortalWebApp/portlets/MobileConfig/mobileConfigurationAction.jsp;jsessionid=HzX4jFGmecXLW7e4b7SCRlCGxU8OY10DVQC-uez7nAzVW81kV0q1!-887965435" method="post">
									<div class="checkboxContainer checkboxClass">	
										<input id="searchCompanyCriteria1" name="searchCompanyCriteria" checked="checked" type="radio" value="compcode"> 
										<span id="checkcompcodeId" class="checkboxText" style="margin-right: 10px;"> Company Code </span>   
										<input id="searchCompanyCriteria2" name="searchCompanyCriteria" type="radio" value="compname">
										<span id="checkcompcodeName" class="checkboxText"> Company Name</span>
									</div>
									<div class="spaceH"></div>
									<div class="spaceH"></div>
	
									<div id="inputCompanyNameDiv" class="createUserFieldContainer">
										<input id="companyinput" name="companyinput" style="margin-right: 10px;" type="text" value="Farmers">(min. 2 characters)
									</div>
	
									<div class="spaceH"></div>
									<div class="spaceH"></div>
									<div class="spaceH"></div>	
									<div class="buttonSection">
										<a id="cancelCrashAlertRefresh" href="#" style="margin-left: 10px;">Cancel</a> 
										<input type="submit" name="companySearch" value="Search" class="searchCompany ui-button ui-widget ui-state-default ui-corner-all" style="margin-left:20px" role="button">	
									</div>
								</form>
	
								<!-- Insurance Company Result Div Start-->
								<div class="spaceH"></div>
								<div class="spaceH"></div>
								<div class="spaceH"></div>
								<div...

CSS

body {
  font-size: 80%;
  font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
}

ul#tabs {
  list-style-type: none;
  margin: 30px 0 0 0;
  padding: 0 0 0.3em 0;
}

ul#tabs li {
  display: inline;
}

ul#tabs li a {
  color: #42454a;
  background-color: #dedbde;
  border: 1px solid #c9c3ba;
  border-bottom: none;
  padding: 0.3em;
  text-decoration: none;
}

ul#tabs li a:hover {
  background-color: #f1f0ee;
}

ul#tabs li a.selected {
  color: #000;
  background-color: #f1f0ee;
  font-weight: bold;
  padding: 0.7em 0.3em 0.38em 0.3em;
}

div.tabContent {
  border: 1px solid #c9c3ba;
  padding: 0.5em;
  background-color: #f1f0ee;
}

div.tabContent.hide {
  display: none;
}
.searchbox {
  box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
}

JavaScript

/* Forked from http://www.elated.com/articles/javascript-tabs/ */
var tabLinks = new Array();
var contentDivs = new Array();

function init() {

  // Grab the tab links and content divs from the page
  var tabListItems = document.getElementById('tabs').childNodes;
  for (var i = 0; i < tabListItems.length; i++) {
    if (tabListItems[i].nodeName == "LI") {
      var tabLink = getFirstChildWithTagName(tabListItems[i], 'A');
      var id = getHash(tabLink.getAttribute('href'));
      tabLinks[id] = tabLink;
      contentDivs[id] = document.getElementById(id);
    }
  }

  // Assign onclick events to the tab links, and
  // highlight the first tab
  var i = 0;

  for (var id in tabLinks) {
    tabLinks[id].onclick = showTab;
    tabLinks[id].onfocus = function() {
      this.blur()
    };
    if (i == 0) tabLinks[id].className = 'selected';
    i++;
  }

  // Hide all content divs except the first
  var i = 0;

  for (var id in contentDivs) {
    if (i != 0) contentDivs[id].className = 'tabContent hide';
    i++;
  }
}

function showTab() {
  var selectedId = getHash(this.getAttribute('href'));

  // Highlight the selected tab, and dim all others.
  // Also show the selected content div, and hide all others.
  for (var id in contentDivs) {
    if (id == selectedId) {
      tabLinks[id].className = 'selected';
      contentDivs[id].className = 'tabContent';
    } else {
      tabLinks[id].className = '';
      contentDivs[id].className = 'tabContent hide';
    }
  }

  // Stop the browser following the link
  return false;
}

function getFirstChildWithTagName(element, tagName) {
  for (var i = 0; i < element.childNodes.length; i++) {
    if (element.childNodes[i].nodeName == tagName) return element.childNodes[i];
  }
}

function getHash(url) {
  var hashPos = url.lastIndexOf('#');
  return url.substring(hashPos + 1);
}

init();