Question

我在链接上使用onclick方法以显示div。但是，div在显示一秒钟后消失了。

function view() {
  document.getElementById('topmenu').setAttribute('style', 'display:block');
}

#topbar {
  background-color: yellow;
  overflow: auto;
}

#topmenu {
  display: none;
}

<header>
  <div id="topbar">
    <img src="/images/santorini-wedding-photographer-logo.png" style="float: left;">
    <span style="float: right;"><a href="" onclick="view()">MENU</a></span>
  </div>
  <div id="topmenu">
    some text here
  </div>
</header>

Answer 1

您的锚标记具有href属性，该属性跟随链接并更改页面内容。删除HREF（这实际上是一个坏主意），或者更好。改用跨度之类的东西。

仅供参考：还有许多其他解决方案可用于保留href，但可防止页面更改位置。

function view() {
			document.getElementById('topmenu').setAttribute('style', 'display:block');
}

#topbar {
	background-color: yellow;
	overflow: auto;
}
#topmenu {
	display:none;
}

<header>
		<div id="topbar">
			<img src="<?php bloginfo('stylesheet_directory'); ?>/images/santorini-wedding-photographer-logo.png" style="float: left;">
			<span style="float: right;"><a onclick="view()">MENU</a></span>
		</div>
		<div id="topmenu">
			some text here
		</div>
	</header>

Answer 2

在定位标记中，将href设置为href =“＃！”这样事件就不会传播。您的div显示代码可以按预期工作。

它也可以与href =“＃”一起使用，但是如果您位于页面底部，则可以带您回到页面顶部。

Div仅在点击时显示，但仅显示第二秒钟

2 个答案: