首页 文章

隐藏或显示特定的DIV

提问于
浏览 次
0

我有两个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中的数组实现此目的？任何其他方法也没关系 .

谢谢你的时间 .

jquery show-hide

5 回答

  • 0
    $('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

    回复于
  • 0

    改变一下你的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();
});
    回复于
  • -1

    独特行的多行 .

    // 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>
    回复于
  • 2

    最简单的方法是给div和锚定对应的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

    回复于

相关问题