Question

我正在处理包含定位iframe的链接的菜单。同时，网址会在单独的div中显示。

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

这是一个片段。

＆＃13;

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

＆＃13;

}
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;
}

＆＃13;

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

＆＃13;

Answer 1

使用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"));
});

您在主播#中使用了HASH href="#tab1"片段，浏览器将关注到该片段，搜索相关的:target ID元素（id="tab1"元素）。这里preventDefault会阻止默认浏览器goTo / follow行为。

Answer 2

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

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

＆＃13;

(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;
	});
})();

＆＃13;

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;}

＆＃13;

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

＆＃13;

单击时跳转到div的Html菜单

2 个答案: