Question

我有这个：

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>

这一切都运作良好，但是当链接＆＃34;看到提示和技巧＆＃34;单击并显示相关文本，我想将文本更改为＆＃34;隐藏提示和技巧＆＃34;。我尝试了几件事，但无法理解。我更喜欢没有jQuery的纯JS。

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

Answer 1

有更好的方法可以做到这一点，但我认为这就是你想要的使用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';
        }
    }
  }

这是您的Fiddle

Answer 2

您可以通过在链接上添加事件侦听器来完成此操作。首先，您应该为链接标记添加一个ID，例如＆＃39; tips-tricks-toggle＆＃39;所以你可以用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';
    });
})();

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

这里是一个小伙伴http://jsfiddle.net/hNVHJ/11/

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

增强这个简单的JS show / hide脚本

2 个答案: