增强这个简单的JS显示/隐藏脚本

Enhance this simple JS show/hide script

本文关键字：显示 隐藏 脚本 JS 简单 增强      更新时间：2023-09-26

我有这个:

JS 

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

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

  <a href="javascript:unhide('learnHTML');">See tips and tricks</a> 
  <p><div id="learnHTML" class="hidden"> my text</div></p>

这一切都工作得很好，但是当链接"查看提示和技巧"被点击并显示相关文本时，我想将文本更改为"隐藏提示和技巧"。我试了好几种方法，都没能弄明白。我更喜欢不使用jQuery的纯JS。

http://jsfiddle.net/hNVHJ/6/

有更好的方法来做到这一点，但我认为这是你想要的。
使用onclick代替href:

HTML: 

  <a href="javascript:void(0);" onclick="unhide(this,'learnHTML');">See tips and tricks</a> 
    <p><div id="learnHTML" class="hidden"> my text</div></p>

JS: 

function unhide(elem,divID) {
    var item = document.getElementById(divID);
    if (item) {
        if(item.className == 'hidden'){
              elem.innerText = elem.innerText.replace('See','Hide');
              item.className= 'unhidden';
        }
        else
        {
              elem.innerText = elem.innerText.replace('Hide','See');
              item.className= 'hidden';
        }
    }
  }

这是你的提琴

您可以通过在链接上添加事件侦听器来实现这一点。首先，你应该给链接标签一个像'tips-tricks-toggle'这样的id，这样你就可以很容易地用javascript访问它。

<a href="#" id="tips-tricks-toggle">See tips and tricks</a>
<p><div id="learnHTML" class="hidden"> my text</div></p>

现在，在</body>标签上面添加一个<script></script>在这个脚本标签中，你可以放这个javascript。它需要在主体中的所有html之后的原因是，在元素加载到页面上之前，javascript不会运行。

(function() {
    var button = document.getElementById('tips-tricks-toggle'),
        div = document.getElementById('learnHTML');
    button.addEventListener('click', function() {
        this.innerHTML = this.innerHTML === 'See tips and tricks' ? 'Hide tips and tricks' : 'See tips and tricks';
        div.className = div.className === 'hidden' ? 'unhidden' : 'hidden';
    });
})();

它的作用是将两个元素存储到变量中，以便于访问。然后为链接标记上的单击事件添加一个事件侦听器。当链接标签被点击时，回调函数运行。

这是一个js提琴http://jsfiddle.net/hNVHJ/11/

这个JS代码是对上面代码http://jsfiddle.net/hNVHJ/13/的增强，它允许多个链接和多个隐藏div。

相关文章：