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

我的问题是我希望网址保持干净，没有＃。有可能吗？

Answer 1

是的，您可以使用：

<a href="">

当你点击链接时你需要使用preventDefault（），但你在列表中使用click甚至可以使用stopPropagation。

例如：

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

Answer 2

是的，这是可能的。

只需在e.preventdefault();

之前在点击功能中添加$('#text1').slideToggle();即可

单击<a> with no # added in URL</a> </div>显示/隐藏<div>

2 个答案: