當鏈接被點擊時顯示div

我需要一種方法來創建下拉菜單。在下面點擊鏈接時會顯示上面的表格。當鏈接被點擊時顯示div

我的HTML

<div id="container"> 
    <table id="supposeToBeHidden"> 
     some content 
    </table> 
    <a href="#" id="btnToClickToShowTable">Click me</a> 
</div>

這將是冷靜，如果該解決方案是純CSS，但不是必須的。

來源

2013-08-21 Michael Tot Korsgaard

純CSS我不相信，但除了極少數的JavaScript線是可能的。 – DontVoteMeDown

用css :target僞類

<div id="container"> 
    <table id="hide"> 
     <tr><td>some content</td></tr> 
    </table> 
    <a href="#hide" >Click me</a> 
</div>

的CSS：

#hide { opacity: 0; } 
#hide:target {opacity: 1;}

小提琴：http://jsfiddle.net/tdnyd/

更多:target pseudo-class

來源

2013-08-21 18:43:18

如果第二次點擊，是否可以再次隱藏表格？ –

@MichaelTotKorsgaard不，這是不可能的......這與我的CSS解決方案基本上是一樣的答案，只是隱藏目標有點不同。 – brbcoding

純CSS，但它不會崩潰備份：

HTML

<div id="container"> 
    <table id="hidden"> 
     <tr><td>some content</td></tr> 
    </table> 
    <a href="#hidden" id="btnToClickToShowTable">Click me</a> 
</div>

CSS

#hidden { 
    display: none; 
} 

#hidden:target { 
    display: block; 
}

Demo

可切換的示例，使用sweet classList api。（香草JS）

var el = document.getElementById('btnToClickToShowTable'); 
var sh = document.getElementById('hidden'); 
el.addEventListener('click', function(){ 
    sh.classList.toggle('show'); 
});

Demo

來源

2013-08-21 17:47:32 brbcoding

這是不可能AFAIK只用CSS，但使用jQuery，你可以做到這一點很容易：

<div id="container"> 
    <table id="supposeToBeHidden"> 
     <tr><td>some content</td></tr> 
    </table> 
    <a href="#" id="btnToClickToShowTable">Click me</a> 
</div>

和

JSFIDDLE：http://jsfiddle.net/LEK6P/

來源

2013-08-21 17:50:23

由於我沒有看到jQuery的標籤，不過，我覺得我會告訴你如何與JS香草做到這一點：

var bindEvents = (function() { 
    var button = document.getElementById("btnToClickToShowTable"); 
    button.addEventListener("click", function (e) { 
     var table = document.getElementById("supposeToBeHidden"); 
     toggle(table); 
     e.preventDefault(); 
    }, false); 
}());

這裏是一個小提琴：http://jsfiddle.net/edfke/1/

來源

2013-08-21 18:07:47

當鏈接被點擊時顯示div

回答

相關問題