0

我有 jquery 脚本，它在a href="#1"选择时替换 div。a href="#1"也被替换，a href="#2"反之亦然。这是jQuery：

$('.child2, a[href="#1"]').hide()

$('#replacepagelinks a').click(function(){
    $(this).hide().siblings().show()
    var w = this.hash.replace('#', '');
    $('#parent div.child'+w).show().siblings().hide()
})

这是HTML。

<div id="parent">
<div class="child1">Child 1 Contents</div>
<div class="child2">Child 2 Contents</div>
</div>
<div id="replacepagelinks">
<a href="#1">Replace Child 1 with Child 2</a>
<a href="#2">Replace Child 2 with Child 1</a>
</div>

这是 jfiddle 工作示例http://jsfiddle.net/KaqZ5/

这适用于 1 个实例。但是我在 jquery 菜单中多次定位这些，这会导致问题。如果我单击第一个菜单项，它会显示 child1，然后单击a href="#1"显示 child2 会按预期进行。但是现在如果我进入第二个菜单项 child2 仍然显示（不是应该的 child1！），因为 jquery 代码尚未重置。这是我的html设置：

<div id=menu">
     <div class="menu_item">
          <a href="#" class="drop_menu"></a>
           <div id="parent">
              <div class="child1">Child 1 Contents</div>
              <div class="child2">Child 2 Contents</div>
           </div>
           <div id="replacepagelinks">
              <a href="#1">Replace Child 1 with Child 2</a>
              <a href="#2">Replace Child 2 with Child 1</a>
           </div>
     </div>
     <div class="menu_item">
          <a href="#" class="drop_menu"></a>
           <div id="parent">
              <div class="child1">Child 1 Contents</div>
              <div class="child2">Child 2 Contents</div>
           </div>
           <div id="replacepagelinks">
              <a href="#1">Replace Child 1 with Child 2</a>
              <a href="#2">Replace Child 2 with Child 1</a>
           </div>
     </div>
     <div class="menu_item"> etc.. </div>
</div>

为了删除显示每个 menu_item 我有一个a href="#" class="drop_menu执行菜单删除 jquery 的。有没有办法让相同的a href="#" class="drop_menu"链接也重置'replace div jquery script'（本页顶部），以便每次选择菜单项时 child1 是第一个出现的？多谢了。皮亚

4

3 回答 3

0

你是这个意思吗？http://jsfiddle.net/KaqZ5/3/

我将函数的第一行更改click为：

     $('a[href="' + this.hash + '"]').hide().siblings().show()

例如：这将隐藏所有#1链接并显示链接#2。

于 2012-10-17T12:17:04.107 回答
0

如果我理解正确，您想确保单击 a 时始终显示class=child1and并且隐藏其他？然后这会做的伎俩：href=#2drop_menu

$(".drop_menu").on('click', function() {
    $(this).parent().find('.child1, a[href="#2"]').show().siblings().hide();
});
于 2012-10-17T12:23:31.803 回答
0

你永远不应该有两个具有相同 id 的标签（你有不止一次的 #parent 和 #replacepagelinks），id 应该是唯一的，如果你需要多个标签，那么你有一个类

$('#replacepagelinks a').click(function(){
  $(this).hide().siblings().show()
  var w = this.hash.replace('#', '');
  item = $(this).parents('.menu_item'); /*get the parent .menu_item*/
  $(item).find('.child'+w).show().siblings().hide(); /*find the .child and show it*/
})
于 2012-10-17T12:23:44.127 回答