隐藏或显示特定的 DIV答案

【问题标题】：Hide or show specific DIVs隐藏或显示特定的 DIV
【发布时间】：2012-11-01 22:14:55
【问题描述】：

我有两个 DIV。一个有一个列表，另一个有一个 DIV 的集合。

<div>
    <ul>
        <li><a>One</a></li>
        <li><a>Two</a></li>
        <li><a>Three</a></li>
    </ul>
</div>
<div>
    <div>Some content one</div>
    <div>Some content two</div>
    <div>Some content three</div>
</div>

当我点击超链接“一个”时，我想显示第一个 DIV（一些内容）并隐藏所有其他 DIV。当我点击超链接“二”时，我想显示第二个 DIV（一些内容二）并隐藏所有其他内容。如何在 jQuery 中使用数组来实现这一点？任何其他方法也可以。

感谢您的宝贵时间。

【问题讨论】：

网上有很多这样的例子。使用 Jquery 的众多教程。youtube.com/watch?v=UHEcKmoMBZo 这是一个

标签： jquery show-hide

【解决方案1】：

$('li').click(function() {
    var which = $(this).index();
    $('div').find('div').hide().eq(which).show();
});

工作fiddle

【讨论】：

【解决方案2】：

什么鬼：

$('a').on('click', function(e) {
    e.preventDefault();
    $('div>div').eq($(this).closest('li').index()).show().siblings().hide();
});

FIDDLE

【讨论】：

【解决方案3】：

稍微修改一下你的html：

<div>
    <ul>
        <li><span data-showclass=".show_1">One</span></li>
        <li><span data-showclass=".show_2">Two</span></li>
        <li><span data-showclass=".show_3">Three</span></li>
    </ul>
</div>
<div id="swichDiv">
    <div class="show show_1">Some content one</div>
    <div class="show show_2">Some content two</div>
    <div class="show show_3">Some content three</div>
</div>

然后是 jQuery：

$('ul li span[data-showclass]').click(function(){
  $('#swichDiv .show').hide().filter($(this).data('showclass')).show();
});

【讨论】：

不需要额外的属性；看看我的回答。

【解决方案4】：

多行表示唯一行。

// show hide in jquery
$('.showdata').hide(); // hide all on start

$('.showhide').click(function (e) {
    //e.preventDefault();
    var SH = this.SH ^= 1; // "Simple toggler"
    $(this).text(SH ? 'Hide' : 'Show')
    var id = event.target.id; // get id 
    //alert(event.target.id);
    $('#data' + id).toggle(); // show this one
});



<p><span class="showhide" id="1">Show</span>&nbsp;<span class="showdata" id="data1">content1</span> </p>

<p><span class="showhide" id="2">Show</span>&nbsp;<span class="showdata" id="data2">content2</span> </p>

【讨论】：

【解决方案5】：

最简单的方法是给div和anchors对应的id和class

检查这个..它仍然可以优化

HTML

<div>
    <ul>
        <li><a id="wrapper1">One</a></li>
        <li><a id="wrapper2">Two</a></li>
        <li><a id="wrapper3">Three</a></li>
    </ul>
</div>
<div class="wrap">
    <div class="wrapper1" style="display:none">Some content one</div>
    <div class="wrapper2" style="display:none">Some content two</div>
    <div class="wrapper3" style="display:none">Some content three</div>
</div>

Javascript

$('[id^="wrapper"]').on('click', function(e) {
    e.preventDefault();
    $('.wrap > div').hide();

    $('.'+ this.id).show();
});

Check Fiddle

【讨论】：

不需要额外的属性；看看我的回答。