隱藏或顯示特定的DIV

我有兩個DIV。一個有一個列表，另一個有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。當我點擊超鏈接'Two'時，我想顯示第二個DIV（一些內容兩個）並隱藏所有其他DIV。我如何使用jQuery中的數組來完成這個任務？其他任何方法都可以。

謝謝你的時間。

來源

2012-11-01 b-marls

這裏有很多這方面的例子。衆多教程使用Jquery.http：//www.youtube.com/watch？v = UHEcKmoMBZo這裏有一個 – DaveyLaser

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

工作fiddle

來源

2012-11-01 22:19:48 fncombo

-1

最簡單的方法就是給div的和相應的ID和類

檢查這個。它仍然可以優化錨

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

來源

2012-11-01 22:20:01

不需要額外的屬性;看看我的答案。 – fncombo

改變一點點你的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(); 
});

來源

2012-11-01 22:21:01

不需要額外的屬性;看看我的答案。 – fncombo

這段代碼的工作原理如何？ - – user32056

到底什麼：

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

FIDDLE

來源

2012-11-01 22:28:20 adeneo

多行的唯一行。

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

來源

2014-03-27 13:34:24 captainhero70

隱藏或顯示特定的DIV

回答

相關問題