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

Question

I am using onclick method on a link in order to display a div. However, the div disappears after displaying for a second.

 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

Your anchor tag has a href attribute, which is following the link and changing the page contents. Remove the HREF ( which is actually a bad idea ), or better yet; use a span or something instead.

FYI: There are also multiple other solutions available to keep the href, but prevent the page from changing location.

 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

In your anchor tag, set your href to href="#!" so that the event doesn't propagate. And your code for the div to show works as expected.

It would also work with href="#", but this would take you back to the top of the page in case you're somewhere at the bottom.