javascript - URL anchor hash, then open a tab using another id via URL -
i need url parameter select section via hash id (#features) , open tab #2 within section (tab 1 open default). want use index.html#features , once has located section, open tab #2 (#tab2).
my js below looks hash in url, if hash shown, trigger click effect hash. trying use index.html#tab2, won't move down #features section , i'm not sure how solve this.
the #features section near bottom of page, need first locate section , open 2nd tab.
<article id="features"> <div class="tab-wrapper"> <ul class="tab-wrapper__tab-list" role="tablist"> <li role="presentation"> <a href="#tab1" role="tab" aria-controls="panel0">tab one</a> </li> <li role="presentation"> <a href="#tab2" role="tab" aria-controls="panel1">tab two</a> </li> <li role="presentation"> <a href="#tab3" role="tab" aria-controls="panel2">tab three</a> </li> </ul> <div id="tab1" class="tab-wrapper__tab" role="tabpanel"> <div class="tab-wrapper__content-wrapper"> <p>lorem ipsum dolor sit amet, nam purto autem contentiones. cum solet verear petentium ut, incorrupte interesset sit, eu sea dicant suscipit definiebas. ut illum habemus sententiae sea, nec nibh accusata an. tempor dissentias ea nam. utinam volutpat sed at, dicta errem cu est.</p> </div> </div> <div id="tab2" class="tab-wrapper__tab" role="tabpanel"> <div class="tab-wrapper__content-wrapper"> <p>vel zril putent incorrupte ei. cu tation veniam euripidis vel, diceret minimum deserunt ius. eam ex probatus laboramus, cum ad noluisse suscipit, everti accusata id eam. ius et commune recusabo, id munere alterum mei. rebum oratio malorum usu te, no feugait inciderint eos. eum viderer deseruisse instructior at. nusquam expetenda eam et.</p> </div> </div> <div id="tab3" class="tab-wrapper__tab" role="tabpanel"> <div class="tab-wrapper__content-wrapper"> <p>tacimates consetetur eu. amet persecuti eum, ne facete audiam mei. pri et alia urbanitas, dicunt tacimates eos eu. ut sit inani urbanitas. has in equidem atomorum accommodare. te vim decore cetero intellegebat. saepe timeam posidonium pro te, nulla insolens adipisci ne vis.</p> </div> </div> </div> </article> <script> $(function () { var hash = $.trim(window.location.hash); if (hash) $('.tab-wrapper__tab-list a[href$="'+ hash +'"]').trigger('click'); }); </script>
have tried scrolling tab button #tab2 in url? solve problem scrolling down features section, #tab2 element on top of features section.
a jsfiddle runs in iframe , need provide hash inside link of iframe. workaround setting hash javascript. if set window.location.hash = "tab2"; first line in script section, scrolls down , displays second tab.
if insist on scrolling #features element, can realize pretty easy javascript. allows create animated scroll down section. see answer more information that: https://stackoverflow.com/a/16475234/3233827
Comments
Post a Comment