< Back to Code

Tab change on click and detect hashtag changed

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>
$( 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>
				
			
tab content 1
tab content 2
tab content 3

© Copyright by JAYbranding – All rights reserved.

Chúng tôi mong muốn tư vấn chi tiết hơn cho quý khách.
Vui lòng nhập thông tin để nhận tự vấn