Question

当我点击锚标签时，我需要某种实用的解决方案来切换不同的div。

我做了一个JSfiddle，这是我想要的解决方案。当我第一次点击“show 1”然后“show 2”时，问题就出现了两个第一个占位符内容消失，但没有出现任何新内容。

我想这样：当我点击“show 1”时，会出现两个占位符（ PlaceHolder 1和2 ）。点击“显示2”没有关闭占位符1和2 。 PlaceHolder 1和2 应该关闭 AND PlaceHolder 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>

JQuery的：

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

Answer 1

您可以将其简化为：

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

Answer 2

您的主要问题是您的使用$(.content-wrapper).toggle()您最初只想隐藏content wrapper，然后只需点击一下即可显示。通过toggling您的内容包装器，您每隔一次点击就会消失，这就是您必须单击两次才能看到它的原因。

$(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").show();
});

如果您希望保持切换功能（隐藏已经显示的div），这里有一个解决方案。

$(document.body).on("click", "a.show", function () {
  var id = $(this).attr("id");
  if($(".content-wrapper #item-"+id).is(':visible'))
      $(".content-wrapper").hide();
  else{
      $(".content-wrapper").children("div").hide();
      $(".content-wrapper #item-"+id).show();
      $(".content-wrapper").show();
  }
});

Answer 3

通过选择锚标记的ID，您将获得更多灵活性和性能。您还应隐藏要隐藏的特定div，而不是隐藏整个容器。这样，您可以轻松地定位要显示的div以及要隐藏的div。

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

$("#1").click(function(){
    $("#item-2").hide();
    $("#item-1").show();
});

$("#2").click(function(){
    $("#item-1").hide();
    $("#item-2").show();
});

但是，如果您要添加未知数量的这些项目，那么您将需要选择（为了便于阅读）元素和类，而不是必须通过文档，这只是多余的。 / p>

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

$("a.show").click(function(){
    $(".content-wrapper > div").hide();
    $("#item-" + $(this).attr("id").show();
});

JQuery在不同的div之间切换

3 个答案: