javascript - Cancel page scroll when using hash in links. -
i made tabs jquery. , need able link exact tab. it's done.(code below) problem faced can't prevent page scroll after switching tabs. how can disable scroll still use hash?
<ul class="tabs group"> <li> <a id="komp-link" class="switch" href="#komplekti">komplekti</a> </li> <li> <a id="intern-link" class="switch" href="#internets">internets</a> </li> <li> <a id="iptv-link" class="switch" href="#iptelevizija">ip televizija</a> </li> </ul> <div id="komplekti">content 1</div> <div id="internets">content 2</div> <div id="iptelevizija">content 3</div>
// tabs switch
$('#komp-link').click(function(){ $('#komplekti').show(); $('#internets').hide(); $('#iptelevizija').hide(); }); $('#intern-link').click(function(){ $('#komplekti').hide(); $('#internets').show(); $('#iptelevizija').hide(); }); $('#iptv-link').click(function(){ $('#komplekti').hide(); $('#internets').hide(); $('#iptelevizija').show(); });
// enable linking exact tab
if(window.location.hash) { var gethash = window.location.hash; console.log(gethash) $(gethash).show(); }
use event.preventdefault()
:
$('#komp-link').click(function(e){ e.preventdefault(); //... });
you should able simplify code though..
<ul class="tabs group"> <li> <a id="komp-link" class="switch" href="#komplekti">komplekti</a> </li> <li> <a id="intern-link" class="switch" href="#internets">internets</a> </li> <li> <a id="iptv-link" class="switch" href="#iptelevizija">ip televizija</a> </li> </ul> <div id="komplekti" class="tab">content 1</div> <div id="internets" class="tab">content 2</div> <div id="iptelevizija" class="tab">content 3</div>
...
$('.switch').click(function(e) { e.preventdefault(); $('.tab').hide(); $($(this).href()).show(); });
Comments
Post a Comment