顯示/隱藏多類使用JavaScript

-1

可能重複：
what is the solution to remove/add a class in pure javascript?顯示/隱藏多類使用JavaScript

首先原諒似乎是一個簡單的JavaScript的問題，我剛開始掌握語言來掌握。我已經看過很多關於通過class或id顯示和隱藏內容的帖子，但它們似乎都適用於一次。我想每次更改三個類，顯示更改取決於用戶已經點擊了哪些鏈接。令人困惑的解釋我知道，但我的代碼示例如下。

我正在構建一個圖像庫，其中包含一系列縮略圖，這些縮略圖都具有分配給它們的類; .photo，.print和.logo。願望是有四個'按鈕';照片，打印，標識和顯示全部。當用戶點擊「照片」時，代碼將設置爲display:block,.print和.logo至display:none。當用戶點擊「打印」時，代碼會將.print設置爲display:block，並將.photo和.logo設置爲display:none。當用戶點擊「徽標」時，代碼會將.logo設置爲display:block，並將.photo和.print設置爲display:none。顯然，當用戶點擊「全部顯示」時，所有的課程設置爲display:block。

<div id="menu"> 
<ul class"toplevel"> 
<li id="photoselect"><a href="photo.html">Photography</a></li> 
<li id="logoselect"><a href="logo.html">Print</a></li> 
<li id="printselect"><a href="print.html">Logo</a></li> 
</ul> 
</div> 
<div id="content"> 
<a href="photo/photo01.jpg" class="" rel="lightbox" title="Caption from the anchor's title attribute"><img class="thumb photo" src="photo/photo01.jpg"></a> 
<a href="photo/photo02.jpg" class="" rel="lightbox" title="Caption from the anchor's title attribute"><img class="thumb photo" src="photo/photo02.jpg"></a> 
<a href="photo/photo03.jpg" class="" rel="lightbox" title="Caption from the anchor's title attribute"><img class="thumb print" src="photo/photo03.jpg"></a> 
<a href="photo/photo04.jpg" class="" rel="lightbox" title="Caption from the anchor's title attribute"><img class="thumb print" src="photo/photo04.jpg"></a> 
<a href="photo/photo05.jpg" class="" rel="lightbox" title="Caption from the anchor's title attribute"><img class="thumb logo" src="photo/photo05.jpg"></a> 
<a href="photo/photo06.jpg" class="" rel="lightbox" title="Caption from the anchor's title attribute"><img class="thumb logo" src="photo/photo06.jpg"></a> 
</div>

來源

2013-01-06 user1953171

或者你也可以利用CSS3的（對於瀏覽器支持它）

<!doctype html> 
<html> 
<head> 
<style> 
#content > input.hidden{ display:none; } 
#content > a{ display:none; } 
#po:checked ~ a.photo{ display:block; } 
#pi:checked ~ a.print{ display:block; } 
#lo:checked ~ a.logo{ display:block; } 
#al:checked ~ a{ display:block; } 
</style> 
</head> 
<body> 
<div id="menu"> 
<ul class"toplevel"> 
<li><label for="po">Photography</label></li> 
<li><label for="pi">Print</label></li> 
<li><label for="lo">Logo</label></li> 
<li><label for="al">All</label></li> 
</ul> 
</div> 
<div id="content"> 
<input type="radio" name="bfc" id="po" class="hidden" /> 
<input type="radio" name="bfc" id="pi" class="hidden" /> 
<input type="radio" name="bfc" id="lo" class="hidden" /> 
<input type="radio" name="bfc" id="al" class="hidden" /> 
<a href="photo/photo01.jpg" class="photo" rel="lightbox" title="Caption from the anchor's title attribute"><img class="thumb" src="photo/photo01.jpg"></a> 
<a href="photo/photo02.jpg" class="photo" rel="lightbox" title="Caption from the anchor's title attribute"><img class="thumb" src="photo/photo02.jpg"></a> 
<a href="photo/photo03.jpg" class="print" rel="lightbox" title="Caption from the anchor's title attribute"><img class="thumb" src="photo/photo03.jpg"></a> 
<a href="photo/photo04.jpg" class="print" rel="lightbox" title="Caption from the anchor's title attribute"><img class="thumb" src="photo/photo04.jpg"></a> 
<a href="photo/photo05.jpg" class="logo" rel="lightbox" title="Caption from the anchor's title attribute"><img class="thumb" src="photo/photo05.jpg"></a> 
<a href="photo/photo06.jpg" class="logo" rel="lightbox" title="Caption from the anchor's title attribute"><img class="thumb" src="photo/photo06.jpg"></a> 
</div> 
</body> 
</html>

來源

2013-01-06 18:22:13 Loris

只是爲了給你如何做到這一點沒有任何圖書館的想法（並與HTML你貼），下面是繞了一個基本的方法：

添加事件偵聽要到click事件作出響應爲
在鏈接點擊，瀏覽所有匹配的元素，改變自己的風格

這是很好的緩存你photosprints和logos，這樣你就不必查詢他們的每次點擊。

var content = document.getElementById('content'); 
var photos = content.getElementsByClassName('photo'); 
var prints = content.getElementsByClassName('print'); 
var logos = content.getElementsByClassName('logo'); 

function changeDisplay(elements, display) { 
    var i = 0, l = elements.length; 
    for(; i < l; i++) { 
    elements[i].style.display = display; 
    } 
} 

document.getElementById('photoselect').addEventListener('click', function (e) { 
    changeDisplay(prints, 'none'); 
    changeDisplay(logos, 'none'); 
    changeDisplay(photos, 'block'); 
}, false);

來源

2013-01-06 18:37:53 bokonic

謝謝，這樣做不需要圖書館就是爲什麼我問是否有Javascript解決方案。我更喜歡純粹的HTML/CSS解決方案，但在瀏覽器趕上之前，我不相信我們可以依靠CSS3。我會放棄這一點。我在這裏假設兩個方面： 1.頂部的四行，它們是緩存？我希望能夠加快進程速度或減少需要編寫的代碼？ 2.底部的部分將命令附加到'photoselct'按鈕/鏈接，這將重複每個按鈕/鏈接？ – user1953171

確切地說;通過緩存我只是意味着你在每個事件監聽器中重用的3個元素數組。您只需爲每個按鈕添加一個偵聽器。 – bokonic

顯示/隱藏多類使用JavaScript

回答

相關問題