單擊鏈接時隱藏div

我正在嘗試用某些文本創建div。然後在下面有一個鏈接，當點擊div應該隱藏。這應該只是Java腳本，即沒有Jquery單擊鏈接時隱藏div

請參閱我的嘗試在下面..是否有可能以某種方式做一個元素內？我必須在JD腳本中創建一個函數嗎？

<div id="text"> 
    Lorem Ipsum blablal b blablaba balbla bla. 
</div> 
<a href="#" onclick="document.getElementById('text').hidden">Click me to hide the div</a>

來源

2014-03-18 user3265963

您可以使用下列內容：

EXAMPLE HERE

<a href="#" onclick="document.getElementById('text').style.display = 'none'">...</a>

另外，如果你想用不顯眼的JavaScript，如果添加id到鏈路這會工作。

EXAMPLE HERE

document.getElementById('link').addEventListener('click',function(){ 
    document.getElementById('text').style.display = 'none'; 
});

隱藏與display:none連結於上述實例。如果你寧願刪除元素：

EXAMPLE HERE

document.getElementById('link').addEventListener('click',function(){ 
    document.getElementById('text').remove(); 
});

如果你想切換的知名度和隱藏/顯示元素，你可以使用.classList.toggle()。

EXAMPLE HERE

document.getElementById('link').addEventListener('click',function(e){ 
    document.getElementById('text').classList.toggle('hidden'); 
});

CSS

.hidden { 
    display:none; 
}

就拿the support此方法考慮。

來源

2014-03-18 17:55:18

喬希是正確的，只需添加一個第三個參數的addEventListener虛假捕獲事件的冒泡階段

document.getElementById('link').addEventListener('click',function(){ 
    document.getElementById('text').style.display = 'none'; 
}, false);

來源

2014-03-18 17:59:45

使用此代碼將讓你隱藏/顯示whitout無需添加任何<script>標籤的DIV或JavaScript庫。

<div id="text" style="display: block"> 
    Lorem Ipsum blablal b blablaba balbla bla. 
</div> 
    <a href="#" onclick="document.getElementById('text').style.display === 'block' ? document.getElementById('text').style.display = 'none' : document.getElementById('text').style.display = 'block'">Click me to hide the div</a>

來源

2014-03-18 18:02:24 user3417400

單擊鏈接時隱藏div

回答

相關問題