Question

#tabs-1 {
    display: none;
}    

#tabs-2 {
    display: none;
}

#tabs-3 {
    display: none;
}

<script type="text/javascript">    
      $(document).ready(function () {
          $(this).click(function () {    
              var a = $(this).find("a").attr("href"); 
              $(a).show();
          });
      }); 
</script>

<body>
<form id="form1" runat="server">
  <div class="tabs">
    <ul>
      <li><a href="#tabs-1">Nunc tincidunt</a></li>
      <li><a href="#tabs-2">Proin dolor</a></li>            
    </ul>
    <div id="tabs-1">
        <h2>Content heading 1</h2>
        <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Doin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
    </div>
    <div id="tabs-2">
      <h2>Content heading 2</h2>
      <p>Morbi tfhgdfahsdh</p>
    </div>
  </div>    
</form>
</body>

我正在尝试制作一个简单的jquery脚本，当我点击有序列表中的ahref时，会显示这些div。当我运行此代码时，它始终显示有序列表中的第一个元素。我想显示超链接中链接的元素。

Answer 1

尝试以下

$('div.tabs > ul > li > a').click(function(e) {
  var id = this.getAttribute('href');
  $(id).toggle();
  e.preventDefault();
});

这使用选择器divs.tabs ul li a来选择有问题的锚标签，并为它们添加一个点击处理程序。单击它将使用href属性作为需要隐藏的DOM元素的id。 e.preventDefault()行会阻止锚点的默认操作尝试导航到s href`

小提琴：http://jsfiddle.net/AWPFJ/3/

Answer 2

我使用选择器来获取所有作为.tabs类子元素的锚标记。在click-function中，我使用它来引用被单击的元素，并获取href-attribute的值。然后将该值用作选择器以显示正确的div。 click函数将事件作为参数接收，该参数可与.preventDefault()一起使用，以确保浏览器不会跟踪链接。

$(document).ready(function () {
    $("div.tabs ul li a").click(function (event) {
        var id = $(this).attr("href");
        $(id).show();
        event.preventDefault();
    });
});

Answer 3

简而言之，这应该做到：

$(".tabs").find("a").click(function() {
    $($(this).attr("href")).show();
    return false;
})

您应该为所有标签添加“标签”类，并添加以下内容：

$(".tabs").find("a").click(function() {
    $(".tab").hide();
    $($(this).attr("href")).show();
    return false;
})

Answer 4

那是因为你的脚本在整个文档上设置了click处理程序，并且第一个总是被选中。修改脚本以在＆lt; a＆gt;上设置点击处理程序元素或父母＆lt; li＆gt;本身，检索对应于href属性值的DIV，并在该DIV上调用show（）方法。我没有机会测试，但它会是这样的：

$(document).ready(function () {
    $('a').click(function () {
        var a = $(this).attr("href");
        $(a).show();
    });
});

HTH，阿斯温

单击href时，jquery make div出现

4 个答案: