单击HTML菜单跳转到div

Question

I'm working on a menu containing links that targets an iframe . At the same time the web address is revealed in a separate div .

The code below works pretty well, but I discovered that the page jumps to the top of the web address text. I've tried a few strategies to to fix this (including placing a fixed position on a wrapper), but just can't seem to be able to stop the page from jumping to the address text.

Here is a 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> 

Answer 1

Use Event.preventDefault(); https://developer.mozilla.org/en/docs/Web/API/Event/preventDefault

$("a").click(function( evt ) {
  evt.preventDefault();
  $("iframe").attr("src", $($(this).attr("href")).find("a").attr("href"));
}); 

You're using HASH # fragments inside your anchors href="#tab1" and the browser will follow to that segment searching for the relevant :target ID element (the id="tab1" element). Here preventDefault prevents the default browser goTo/follow behavior.

Answer 2

anchor makes it jump to the div having that id, for example when you click on a element having href="#tab1" it jumps to div element having id="tab1"

i wrote you a better version of your 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>