Question

这似乎是一个常见的问题，但是当我查看答案时，它们会有所不同。

我有一排五个链接。每个都有一个相应的div下面。当我点击链接时，我希望显示其div和隐藏所有其他链接。

我遇到的一些代码似乎在正确的轨道上：

$('a').on('click', function(){
   var target = $(this).attr('rel');
   $("#"+target).show().siblings("div").hide();
});

但如果我使用＆＃34; a＆＃34;没有目的地，点击链接将我带到页面顶部。我只想让下面的div显示或隐藏......

我可以使用＆＃34;按钮＆＃34;或＆＃34; div＆＃34;而不是＆＃34; a＆＃34;？如果是这样，我将使用什么而不是＆＃34; rel＆＃34;？

抱歉这个菜鸟问题。我似乎无法将我在这里找到的任何解决方案都用于我的网站。最简单的方法是什么？

这里有一些HTML肯定适用于上面的jquery脚本：

＆＃13;

$('a').on('click', function() {
  var target = $(this).attr('rel');
  $("#" + target).show().siblings("div").hide();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="" rel="week_3">Week 3</a>
<a href="" rel="week_4">Week 4</a>
<div>
  <div id="week_3" style="display: none">[..xz.]</div>
  <div id="week_4" style="display: none">[...]</div>
</div>

＆＃13;

但是，如果我的href=""点击该链接，由于某种原因会将我反弹到我的页面顶部。所以我宁愿使用可点击的div或按钮而不是热链接。在这种情况下，我可以在脚本中使用什么而不是＆＃34; rel＆＃34;？

Answer 1

您似乎只需要通过添加e.preventDefault();

来阻止默认行为

＆＃13;

$('a').on('click', function(e) {
  e.preventDefault();
  var target = $(this).attr('rel');
  $("#" + target).show().siblings("div").hide();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" rel="week_3">Week 3</a>

<a href="#" rel="week_4">Week 4</a>

<div>
  <div id="week_3" style="display: none">[..xz.]</div>
  <div id="week_4" style="display: none">[...]</div>
</div>

＆＃13;

Answer 2

您可以在href上使用以下值。

<a href="javascript:void(0);">Anchor</a>

以下是javascript的完整说明：void（0）

JavaScript void运算符计算给定的表达式然后返回undefined值。 https://www.quackit.com/javascript/tutorial/javascript_void_0.cfm

Answer 3

Target attribute不适用于仅适用于Windows或iframe的div。此外，超链接应具有href属性，否则它将成为HTML5规范中的锚点或占位符链接。

您可以在链接及其div之间使用任何共轭属性，例如链接标题将为div id。

示例：

<a href="#" title="div1">Show DIV 1</a>
  <a href="#" title="div2">Show DIV 2</a>
  <a href="#" title="div3">Show DIV 3</a>

<div id="div1" class="linked-div" style="display: none">&nbsp;One</div>
<div id="div2" class="linked-div" style="display: none">&nbsp;Two</div>
  <div id="div3" class="linked-div" style="display: none">&nbsp;Three</div>
<script>
$("a").click(function(){
 divId = $(this).attr("title");
  $(".linked-div").each(function(){
    if ($(this) == $("#"+divId)){
      $(this).show()
    }
    else{
      $(this).hide()
    }
  })
 $("#"+divId).show();
})
</script>

DEMO

Answer 4

尝试使用href="javascript:"或href="#"，而不是将该属性留空。 href=""告诉浏览器重新加载您所在的当前页面，这就是为什么它会将您反弹到页面顶部。

您还可以使用<button>或<div>，效果与使用<a>的效果差别不大。如果您使用rel或<button>，也可以使用<div>。实际上，在rel和<button>上使用<div>可能会更好，因为该属性在这些标记中没有任何功能用途。相反，<a>使用rel属性specify a few things to browsers。

我可以根据点击指定的按钮显示一个div，隐藏所有其他div吗？

4 个答案: