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

我有这个：

JS

CSS

HTML

我的文字

这一切都很好，但当链接“查看提示和技巧”被点击并显示相关文本时，我想将文本更改为“隐藏提示和技巧”。我试了好几件事，但都想不出来。我更喜欢没有jQuery的纯JS

---

有更好的方法可以做到这一点，但我想这正是您想要的。
使用onclick而不是href:

HTML:

---

这是您的

您可以通过在链接上添加事件侦听器来完成此操作。首先，您应该给link标记一个类似于“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>

它所做的是将这两个元素存储到变量中以便于访问。然后在link标记上为click事件添加一个事件侦听器。单击链接标记时，将运行回调函数

这是一把js小提琴

---

此JS fiddle是对上述代码的增强，它允许多个链接和多个隐藏div。

我建议学习正确的事件处理/绑定：。我测试了你的fiddle，但它不工作，因为我单击“是”时没有显示任何内容，但你的解决方案似乎只对一个特定元素ID有效。使用我提到的脚本通过调整链接和div ID，可以显示/隐藏任何元素。

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

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

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

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';
        }
    }
  }

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

(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';
    });
})();