javascript - Goto specific Tab (accordin) on # hyperlink -
i using following code switch tabs. problem if put tabe id in url #, not goto specific tab.
<a href="index.php#tab2">tab 2</a> <a href="index.php#tab3">tab 3</a>
below code
jquery(document).ready(function() { jquery('.tabs .tab-links a').on('click', function(e) { var currentattrvalue = jquery(this).attr('href'); // show/hide tabs jquery('.tabs ' + currentattrvalue).show().siblings().hide(); // change/remove current tab active jquery(this).parent('li').addclass('active').siblings().removeclass('active'); e.preventdefault(); }); });
html code
<ul class="tab-links"> <li class="active"><a style="" href="#tab1">account</a></li> <li><a href="#tab2">jobs posted</a></li> <li><a href="#tab3">messages</a></li> <li><a href="#tab4">post job</a></li> </ul> <div class="tab-content"> <div id="tab1" class="tab active" style="padding-bottom:30px;"> </div> <div id="tab1" class="tab" style="padding-bottom:30px;"> </div> <div id="tab1" class="tab" style="padding-bottom:30px;"> </div> </div>
you try modifying line: var currentattrvalue = jquery(this).attr('href').split("#")[1];
with getting "tab2"
part of link's href
attribute
jquery(document).ready(function() { var changetab = function(id) { // show/hide tabs jquery('.tab-content #' + id).show().siblings().hide(); // change/remove current tab active jquery('.tab-content #' + id + ':visible').addclass("active").siblings().removeclass('active'); }; jquery('.tabs .tab-links a').on('click', function(e) { e.preventdefault(); // here tab id, comming clicked hyperlink var currentattrvalue = jquery(this).attr('href').split("#")[1]; // change/remove current tab active jquery(this).parents("li").addclass("active").siblings().removeclass('active'); changetab(currentattrvalue); }); var tab = document.location.href.split("#"); if(tab.length > 0) { var id = tab[1]; jquery('.tabs .tab-links a[href="#' + id + '"]').click(); window.addeventlistener("load",function() { jquery(window).scrolltop(0); },true); } });
.active { color:red; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="tab-content"> <div id="tab1" class="tab active" style="padding-bottom:30px;">tab 1 content </div> <div id="tab2" class="tab" style="padding-bottom:30px;">tab 2 content </div> <div id="tab3" class="tab" style="padding-bottom:30px;">tab 3 content </div> </div> <div class="tabs"> <div class="tab-links"> <a href="index.php#tab1">tab 1</a> <a href="index.php#tab2">tab 2</a> <a href="index.php#tab3">tab 3</a> </div> </div>
Comments
Post a Comment