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>

当我点击超链接'One'时，我想显示第一个DIV（一些内容一个）并隐藏所有其他DIV。当我点击超链接'Two'时，我想显示第二个DIV（一些内容为两个）并隐藏所有其他内容。如何使用jQuery中的数组实现此目的？任何其他方法都可以。

感谢您的时间。

Answer 1

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

工作fiddle

Answer 2

到底是什么：

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

FIDDLE

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和the 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

隐藏或显示特定的DIV

5 个答案: