顯示/隱藏圖像DIV

我希望圖像充當切換按鈕，因此當它被點擊時會顯示帶有文本的div。顯示/隱藏圖像DIV

下面是我使用的CSS類：

.hidden { display: none; } 
.unhidden { display: block; }

和JS：

function unhide(divID) { 
var item = document.getElementById(divID); 
if (item) { 
item.className=(item.className=='hidden')?'unhidden':'hidden'; 
    } 
}//

這裏的HTML：

<div class="4u">      
    <!-- Box --> 
    <section class="box box-feature"> 
     <a href="javascript:unhide('test');" class="image image-full" 
     <img src="images/pic01.jpg" alt="" /></a> 
    <div id="test" class="hidden"> 
     <header> 
     <h2>Put something here</h2> 
     <span class="byline">Maybe here as well I think</span> 
     </header> 
<p>Test and more text and more text and more text.</p> 
    </div>       
    </section> 
    </div>

來源

2013-07-16 Brian

適用於我：http://jsfiddle.net/barmar/LeUAZ/2/ – Barmar

當你運行它時會發生什麼？如果您按原樣粘貼了代碼，則會出現問題，因爲您的錨標籤上沒有'>'。 –

你有一個語法錯誤。將第4行更改爲：

<a href="javascript:unhide('test');" class="image image-full">

注意行末的>。

除非您決定使用vanilla JavaScript，否則更簡單的方法就是使用jQuery。添加到您的<head>：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

然後你a href可能只是javascript:$('#test').toggle()，你就不需要定義任何功能或CSS類。

來源

2013-07-16 01:19:30

按預期工作。 – Brian

顯示/隱藏圖像DIV

回答

相關問題