javascript - jQuery在不同的div之间切换

当我点击一个锚标签时，我需要一个在不同div之间切换的实用解决方案。
我做了一个JSfiddle，这是我想要的解决方案。
问题是当我第一次点击“show 1”然后点击“show 2”时，前两个占位符的内容消失了，但没有新的内容出现。
我要这样：
当我单击“Show1”时，会出现两个占位符（占位符1和2）。
在不关闭占位符1和2的情况下单击“显示2”。占位符1和2应该关闭，占位符3应该出现。
Jsfiddle:http://jsfiddle.net/CY3tj/2/
HTML格式：

<a id="1" class="show">show 1</a>
 <br/ ><br/ >
<a id="2" class="show">show 2</a>

<div class="content-wrapper">
    <div id="item-1">
        <div>
            <h2>Placeholder1</h2>
            <p>Placeholder1</p>
        </div>
        <div>
            <h2>PLaceHolder2</h2>
            <p>Placeholder2</p>
        </div>
    </div>
        <div id="item-2">
            <div>
                <h2>Placeholder3</h2>
                <p>Placeholder3</p>
            </div>
        </div>
</div>

查询：

$(document).ready(function () {
    $(".content-wrapper").hide();
});

$(document.body).on("click", "a.show", function () {
    var id = $(this).attr("id");
    $(".content-wrapper > div").each(function () {
        if ($(this).attr("id") == "item-" + id) {
            $(this).show();
        } else {
            $(this).hide();
        }
    });
    $(".content-wrapper").toggle();
});

最佳答案

您可以将其简化为：

$(function(){
  var $allItems =  $(".content-wrapper > div"); //Cache the collection here.
  $(document).on("click", "a.show", function () {
      var id = this.id, itemId = "#item-" + id; //get the id and itemId
      $allItems.not($(itemId).toggle()).hide(); //Hide all items but not the one which is the target for which you will do a toggle
  });
});

Demo
不必通过JS隐藏包装器，只需添加一个规则来隐藏其内容。

.content-wrapper >div{
   display:none;
}

关于javascript - jQuery在不同的div之间切换，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/20010303/