jquery - 单击 显示/隐藏 ，URL 中没有添加 #

Question

我用脚本制作了这个演示，通过单击链接显示/隐藏一些 div。 http://jsfiddle.net/q10f3zvL/1/

HTML

<div id="link">
<ul>
<li class="link1"><a href="#">Link 1</a></li>
<li class="link2"><a href="#">Link 2</a></li>
</ul>
</div>

<div id="text1">
<p>text1 text1 text1 text1 text1 text1 text1 text1 text1</p>
<p class="link1"><a href="#">Close Text 1</a></p>
</div>

<div id="text2">
<p>text2 text2 text2 text2 text2 text2 text2 text2 text2</p>
<p class="link2"><a href="#">Close Text 2</a></p>
</div>

CSS

#link { background-color:black; display:inline; position:absolute; bottom:0; right:0; width:120px; }
#link li.link1 a:hover, #link li.link2 a:hover { text-decoration:none; border-bottom:1px solid white; color:white; }
#link li.link1 a, #link li.link2 a { text-decoration:none; color:white; }
#text1 { display:none; position:fixed; top:0px; left:0px; width:300px; height:50%; background-color: black; margin: 0px; padding: 10px; color:white; }
#text2 { display:none; position:fixed; top:0px; right:0px; width:300px; height:50%; background-color: black; margin: 0px; padding: 10px; color:white; }
#text1 .link1 a, #text2 .link2 a { color: white; position:absolute; left:40%; right:40%; bottom:20px; }

JS

$(function() { $('.link1').click(function(e) { $('#text1').slideToggle(); });});
$(function() { $('.link2').click(function(e) { $('#text2').slideToggle(); });});

我的问题是我希望 URL 保持干净，没有#。可能吗？

Answer 1

是的，您可以使用:

<a href="">

并且您需要在单击链接时使用 preventDefault()，但即使在您可能使用 stopPropagation 的列表中也使用了 click。

例如:

$(function() { 
   $('.link1').click(function(e) { 
      e.preventDefault();
      e.stopPropagation(); 
      $('#text1').slideToggle(); 
  });
});