Question

我有6个div并试图隐藏5点击并显示1 div。什么是隐藏5个div并显示1个div的最佳方法？如果我有多个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

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

Answer 2

让所有div都有一个共同的类：

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

小提琴：http://jsfiddle.net/PW7Aa/

Answer 3

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

不知道你的结构，这是一个基本的例子，它也为可点击和可显示的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 4

在链接中添加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>

然后绑定click事件以隐藏除被点击的div以外的所有$("#container > a").click(function(){ var $div = $("#" + $(this).data("div")); $("#container > div").not($div).hide(); $div.show(); });。

{{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);
  });
});

jquery隐藏元素的最佳方法

5 个答案: