Tab change on click and detect hashtag changed

This simple code help you to create tab buttons and tab contents

When the user clicks 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

				
					
    <a id="btn1" href="#btn-1">Button 1</a>
    <a id="btn2" href="#btn-2">Button 2</a>
    <a id="btn3" href="#btn-3">Button 3</a>
    tab content 1
    tab content 2
    tab content 3
<style>
.btn{
border: 1px solid;
padding: 10px;
}
    .btn.selected{
        background: red;
    }
    .tab{
        background: #ccc;
        padding: 100px;
        opacity: 0.5;
    }
    .tab.selected{
        opacity: 1;
    }
</style>
				
			

Button 1
Button 2
Button 3
content tab 1
content tab 2
content tab 3


Posted

print

by

Tags: