jquery - 隐藏或显示特定的 DIV

Question

我有两个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 中使用数组来实现这一点？任何其他方法也可以。

谢谢你的时间。

Answer 1

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

工作小提琴

Answer 2

有没有搞错：

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

小提琴

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

Answer 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>

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

检查小提琴