javascript - HTML菜单点击跳转到div

Question

我正在制作一个包含以 iframe 为目标的链接的菜单。同时，网址显示在单独的 div 中。

下面的代码运行良好，但我发现页面会跳转到网址文本的顶部。我已经尝试了一些策略来解决这个问题(包括在包装器上放置一个固定位置)，但似乎无法阻止页面跳转到地址文本。

这是一个片段。

<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

anchor 使其跳转到具有该 id 的 div，例如，当您单击具有 href="#tab1" 的 a 元素时，它会跳转到 div 元素有 id="tab1"

我给你写了一个更好的代码版本:

(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>