HTML标签<a>href和onclick</a>

Question

I'm working on this project and I'm really stuck on 1 thing: I would like to make a submenu with all sub-pages in one html file.

Whenever I use both href and onclick it does not work.

It only works when I change the href into "#", but that would make the page inaccessible from other pages.

Please note that changing the return value of the function does not help.

Thanks so much in advance!

Here is my HTML:

<script>
function show(shown, hidden, hidden2) {
  document.getElementById(shown).style.display='block';
  document.getElementById(hidden).style.display='none';
  document.getElementById(hidden2).style.display='none';
  return true;
}
</script>

<ul>                
<li><a href="../info/index.html" onclick="return show('Page1','Page2','ṕage3');">Doelstelling</a></li>
<li><a href="../info/index.html" onclick="return show('Page2','Page1','ṕage3');">Bestuur</a></li>
<li><a href="../info/index.html" onclick="return show('Page3','Page1','ṕage2');">Lid worden</a></li>
</ul>

<div id="Page1" style="display:none">
<a href="#" onclick="return show('Page2','Page1','ṕage3');">Bestuur</a></br>
<a href="#" onclick="return show('Page3','Page1','ṕage2');">Lid worden</a>   </br>
<p>

text

</p>

</div></br>

<div id="Page2" style="display:none">
<a href="#" onclick="return show('Page1','Page2','ṕage3');">Doelstelling</a>    </br>
<a href="#" onclick="return show('Page3','Page1','ṕage2');">Lid worden</a></br>
<p>

text

</div></br>
  <div id="Page3" style="display:none">
<a href="#" onclick="return show('Page1','Page2','ṕage3');">Doelstelling</a>  </br>
<a href="#" onclick="return show('Page2','Page1','ṕage3');">Bestuur</a></br>
    <p>
text
 </p>

</div></br>

Thanks again.

Answer 1

return false; doesn't help you because an error triggers before this line of code.

Take a look at your show function call: you pass 'ṕage3' as a third argument, and then you do document.getElementById(hidden2).style.display = ... . But you don't have an element with id="ṕage3".

Replace 'ṕage3' with 'Page3' , and this should do the trick

Answer 2

You need to return false in your OnClick. Since you are calling show in your onclick, return false instead of true.

<script>
function show(shown, hidden, hidden2) {
  document.getElementById(shown).style.display='block';
  document.getElementById(hidden).style.display='none';
  document.getElementById(hidden2).style.display='none';
  return false;
}
</script>

When the user clicks on the anchor (the tag) it will first execute the onclick. If the onclick returns false it will stop. If the onclick returns true, then it will continue with the default behavior and change the window location to the value of the href attribute.

Answer 3

您需要使用event.preventDefault（）禁用JavaScript中的默认事件处理；

Answer 4

 $("a").click(function() { alert(1); return false; }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a href="http://google.com">Text</a> 

Don't use onclick in 2015.