javascript - Html menu jumping to div on click -
i'm working on menu containing links targets iframe. @ same time web address revealed in separate div.
the code below works pretty well, discovered page jumps top of web address text. i've tried few strategies to fix (including placing fixed position on wrapper), can't seem able stop page jumping address text.
here snippet.
<script> var lst; function changecolor(obj) { if (lst) lst.style.color = "#663399"; obj.style.color = "red"; lst = obj; } $("a").click(function() { $("iframe").attr("src", $($(this).attr("href")).find("a").attr("href")); }); </script>} a:active { text-decoration: underline; } .menu { font-size: 13px; top: 100px; width: 260px; height: 100px; left: 8px; } .header { font-size: 13px; height: 50px; width: 260px; } .hyperlinks { top: 50px; width: 260px; height: 50px; } #tabs p { display: none; font-size: 13px; } #tabs p.tab1:target { display: block; } #tabs p.tab2:target { display: block; } #tabs p.tab3:target { display: block; } iframe { width: 260px; height: 260px; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="tabs"> <div class="header"> title of site <br> <a href="mailto:email@email.com">email@email.com</a> </div> <div class="hyperlinks"> <p id='tab1' class='tab1'> <a href="https://www.wikipedia.org">"https://www.wikipedia.org"</a> </p> <p id='tab2' class='tab2'> <a href="http://dictionary.reference.com">"http://dictionary.reference.com"</a> </p> <p id='tab3' class='tab3'> <a href="http://www.thesaurus.com">"http://www.thesaurus.com"</a> </p> </div> <div class="menu"> <a href="#tab1" class="nav-tab tab1" onclick="changecolor(this)"> menu item 1<br><br></a> <a href="#tab2" class="nav-tab nav-tab-active tab2" onclick="changecolor(this)"> menu item 2<br><br></a> <a href="#tab3" class="nav-tab nav-tab-active tab3" onclick="changecolor(this)"> menu item 3<br><br></a> </div> <br/> <iframe> </iframe> </div>
anchor makes jump div having id, example when click on a element having href="#tab1" jumps div element having id="tab1"
i wrote better version of code:
(function() { $('.menu a.nav-tab').on('click', function() { var href = $(this).attr('href'); $('iframe').attr('src', href); $('.current-url').empty().append( $('<a>').attr('href', href).append('"'+ href +'"') ); $('.menu a.nav-tab').removeclass('current'); $(this).addclass('current'); return false; }); })();a:active { text-decoration: underline; } .menu { font-size: 13px; top: 100px; width: 260px; height: 100px; left: 8px; } .header { font-size: 13px; height: 50px; width: 260px; } .hyperlinks { top: 50px; width: 260px; height: 50px; } iframe { width: 260px; height: 260px; } .menu a.nav-tab { color: #663399; } .menu a.nav-tab.current {color: red;} <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="tabs"> <div class="header"> title of site <br> <a href="mailto:email@email.com">email@email.com</a> </div> <div class="hyperlinks"> <p class="current-url"></p> </div> <div class="menu"> <a class="nav-tab tab1" href="https://www.wikipedia.org" >menu item 1</a> <br /> <a class="nav-tab nav-tab-active tab2" href="http://dictionary.reference.com"> menu item 2</a> <br /> <a class="nav-tab nav-tab-active tab3" href="http://www.thesaurus.com"> menu item 3</a> <br /> </div> <iframe></iframe> </div>
Comments
Post a Comment