jquery隐藏元素的最佳方法

Question

我有6个div，并试图在点击时隐藏5个，然后显示1个div。隐藏5个div并显示1个div的最佳方法是什么？在某种程度上，我在思考是否有n个div。需要建议

<script>
    $(document).ready(function () {
        $('#divLandingLink1').click(function () {
            $('#landingInfo1').show();
            $('#landingInfo2,#landingInfo3,#landingInfo4,#landingInfo5,#landingInfo6').hide();
        });
        $('#divLandingLink2').click(function () {
            $('#landingInfo2').show();
            $('#landingInfo1,#landingInfo3,#landingInfo4,#landingInfo5,#landingInfo6').hide();
        });
        $('#divLandingLink3').click(function () {
            $('#landingInfo3').show();
            $('#landingInfo1,#landingInfo2,#landingInfo4,#landingInfo5,#landingInfo6').hide();
        });
        $('#divLandingLink4').click(function () {
            $('#landingInfo4').show();
            $('#landingInfo1,#landingInfo2,#landingInfo3,#landingInfo5,#landingInfo6').hide();
        });
        $('#divLandingLink5').click(function () {
            $('#landingInfo5').show();
            $('#landingInfo1,#landingInfo2,#landingInfo3,#landingInfo4,#landingInfo6').hide();
        });
        $('#divLandingLink6').click(function () {
            $('#landingInfo6').show();
            $('#landingInfo1,#landingInfo2,#landingInfo3,#landingInfo4,#landingInfo5').hide();
        });
    });
</script>

Answer 1

向链接添加data-div属性：

<div id="container">
    <a href="#" data-div="landingInfo1">Info 1</a>
    <div id="landingInfo1">
        More info here
    </div>
    <a href="#" data-div="landingInfo2">Info 2</a>
    <div id="landingInfo2">
        More info here
    </div>
</div>

然后绑定单击事件以隐藏除已单击的事件之外的所有div。

$("#container > a").click(function(){
    var $div = $("#" + $(this).data("div"));
    $("#container > div").not($div).hide();
    $div.show();
});

Answer 2

var $links = $('#landingInfo1,
                #landingInfo2,
                #landingInfo3,
                #landingInfo4,
                #landingInfo5,
                #landingInfo6')
   .on("click", function(){
      $(this).show();
      $links.not(this).hide();
});

Answer 3

让所有div都有一个公共类：

$(".option").click(function(){
    $(".option").hide();
    $(this).show();
});

Fiddle：http://jsfiddle.net/PW7Aa/

Answer 4

由于您单击的div与隐藏/显示的div不同，因此您需要一种方法将可单击的div和隐藏/显示div链接起来。标记中的数据属性可能是一个很好的选择。

由于不知道你的结构，这里有一个基本的例子，它还为可点击和可显示的div提供了公共类，以便于访问。

<div id="divLandingLink1" class="divLandingLink" data-id="landingInfo1">show info div 1</div>
<div id="landingInfo1" class="landingInfo">info div 1</div>
<div id="divLandingLink2" class="divLandingLink" data-id="landingInfo2">show info div 2</div>
<div id="landingInfo2" class="landingInfo">info div 2</div>
<script>
    $(document).ready(function () {
        $('.divLandingLink').click(function () {
            $('.landingInfo').hide();
            var id = $(this).data('id');
            $('#'+id).show();
        });
    });
</script>

小提琴：http://jsfiddle.net/TpgH8/1/

Answer 5

这是一个例子，这里有一个FIDDLE

<nav>
  <ul>
    <li data-rel="1">Info 1
    </li><li data-rel="2">Info 2
    </li><li data-rel="3">Info 3
    </li><li data-rel="4">Info 4
    </li><li data-rel="5">Info 5
    </li><li data-rel="6">Info 6</li>
  </ul>
</nav>
<div class="info">Content 1</div>
<div class="info">Content 2</div>
<div class="info">Content 3</div>
<div class="info">Content 4</div>
<div class="info">Content 5</div>
<div class="info">Content 6</div>

---

nav ul {
  margin: 10px 20px;
  list-style: none;
}
nav li {
  background: #ddd;
  display: inline-block;
  padding: 3px 10px;
  cursor: pointer;
}
.info {
  position: absolute;
  display: none;
  top: 50px;
  left: 20px;
  width: 600px;
  height: 400px;
  padding: 10px;
  border: 1px dotted #ddd;
}
.info:nth-of-type(1) {
  display: block;
}

---

$(function() {
  $('nav li').click(function() {
    $('.info:nth-of-type('+$(this).data('rel')+')').fadeIn(400).siblings('.info').fadeOut(400);
  });
});