Skip to content

Instantly share code, notes, and snippets.

@rennex

rennex/simpletabs.html

Last active December 25, 2015 13:39
Show Gist options
  • Save rennex/6985735 to your computer and use it in GitHub Desktop.
Save rennex/6985735 to your computer and use it in GitHub Desktop.
Download ZIP
HTML tabs using a simple piece of standalone JS and some CSS
Raw
simpletabs.html
<html>
<head>
<style type="text/css">
#tabnav {
list-style-type: none;
padding: 0;
}
#tabnav li {
display: inline;
padding: 0.5em;
background-color: #ddd;
cursor: pointer;
}
#tabnav li:hover {
background-color: #ffd;
}
#tabnav .selected {
background-color: #dfd;
}
#tabcontainer > div {
display: none;
border: 1px solid black;
padding: 1em;
}
#tabcontainer > .selected {
display: block;
}
</style>
<script type="text/javascript">
function setClasses(parentid, wantedid) {
var els = document.getElementById(parentid).children
for (var i = 0; i < els.length; i++) {
var e = els[i]
e.className = (e.id == wantedid) ? "selected" : ""
}
}
function clickTab(nav) {
var currenttab = nav.id.match(/^tab-([0-9]+)/)[0]
setClasses("tabcontainer", currenttab)
setClasses("tabnav", nav.id)
}
</script>
</head>
<body>
<div>
<ul id="tabnav">
<li class="selected" id="tab-1-nav" onclick="clickTab(this)">tab 1</li>
<li id="tab-2-nav" onclick="clickTab(this)">tab 2</li>
<li id="tab-3-nav" onclick="clickTab(this)">tab 3</li>
</ul>
<div id="tabcontainer">
<div id="tab-1" class="selected">tab1 contents</div>
<div id="tab-2">tab2 contents!!! <div>inner div</div></div>
<div id="tab-3">and a third tab.</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment