This simple code help you to create tab buttons and tab contents
When user click on the tab button, the tab content will reveal accordingly
The simple code use jquery and useful when you need to display lots of content in different tabs
<div style="padding: 20px">
<a class="btn" id="btn1" href="#btn-1">Button 1</a>
<a class="btn" id="btn2" href="#btn-2">Button 2</a>
<a class="btn" id="btn3" href="#btn-3">Button 3</a>
</div>
<div>
<div class="tab" id="tab1">tab content 1</div>
<div class="tab" id="tab2">tab content 2</div>
<div class="tab" id="tab3">tab content 3</div>
</div> <script type="litespeed/javascript">$(document).ready(function(){var hash="btn-1";$(window).bind('hashchange load',function(){console.log(hash);if(window.location.hash){hash=window.location.hash.substring(1)}
if(hash=="btn-1"){$(".btn, .tab").removeClass("selected");$("#btn1, #tab1").addClass("selected")}else if(hash=="btn-2"){$(".btn, .tab").removeClass("selected");$("#btn2, #tab2").addClass("selected")}else if(hash=="btn-3"){$(".btn, .tab").removeClass("selected");$("#btn3, #tab3").addClass("selected")}})})</script> <style>.btn{
border: 1px solid;
padding: 10px;
}
.btn.selected{
background: red;
}
.tab{
background: #ccc;
padding: 100px;
opacity: 0.5;
}
.tab.selected{
opacity: 1;
}</style>
English