通过单击没有 Jquery 的 Javascript 链接来隐藏和显示元素答案

【问题标题】：Hide and Show elements by clicking on a link with Java Script without Jquery通过单击没有 Jquery 的 Javascript 链接来隐藏和显示元素
【发布时间】：2013-03-30 20:41:12
【问题描述】：

我真的需要一些帮助，我想知道什么是隐藏和显示元素的最佳方法，方法是单击仅使用没有 Jquery 的 Java Script 的链接。

所以，当我点击“Link 1”时，需要添加“class active”，并且应该只显示“<div id="cont1">”，而其他应该隐藏。

另外，这样做有可能在将来添加更多的 HTML 链接和内容，而无需更改 JS 代码。

如果有人帮助我，我将永远感激不尽！

按照 HTML 代码：

        <div class="all">
          <ul class="links">
             <li class="active"><a href="#">Link 1</a></li>
             <li><a href="#">Link 2</a></li>
             <li><a href="#">Link 3</a></li>
             <li><a href="#">Link 4</a></li>
           </ul>
          <div class="content">
             <div id="cont1">
                 <p>Content 1</p>
             </div>
             <div id="cont2">
                 <p>Content 2</p>
             </div>
             <div id="cont3">
                 <p>Content 3</p>
             </div>
             <div id="cont4">
                 <p>Content 4</p>
             </div>
          </div>
        </div>

【问题讨论】：

你的代码需要兼容哪些浏览器？
我在这里尝试但我做不到，所以我不想弄乱你的逻辑。需要跨浏览器，主要是Chrome、FF和IE

标签： javascript class hide add show

【解决方案1】：

尝试修复您的代码。

在document.getElementsByClassName("content") 之后添加缺少的[0]
将getElementsByClassName() 更改为querySelectorAll() 以便在IE8 中工作
将navList.children[i].onclick 中的变量i 更改为记住的变量index
将变量i 的起始值更改为0
将index + 1 传递为mudaConteudo() 的目标，因为索引以0 开头，但您的内容ID 以1 开头

结果如下：

window.onload = function () {
    function mudaConteudo(elm, dest) {
        var divs = document.querySelectorAll(".content")[0].getElementsByTagName('div');
        for (var i = 0, len = divs.length; i < len; i++) {
            divs[i].style.display = "none";
        }
        document.getElementById('cont' + dest).style.display = "block";
    }
    var navList = document.querySelectorAll(".links")[0];
    for (var i = 0, len = navList.children.length; i < len; i++) {
        (function(index){
            navList.children[index].onclick = function () {
                mudaConteudo(this, index + 1);
                document.querySelectorAll(".active")[0].removeAttribute("class");
                this.className = "active";
            };
        })(i);
    }
}

希望对您有所帮助。

【讨论】：

脚本坏了...调试时很多行未定义...例如：TypeError: document.querySelectorAll(...)[0] is undefined
另一种：TypeError: navList is undefined for (var i = 0, len = navList.children.length; i

【解决方案2】：

试试这个：

var list = document.getElementsByTagName('ul');
var links = list[0].getElementsByTagName('a');
for (var i = 0; i < links.length; i++) {
    links[i].onclick = function () {
        var target = this.innerHTML.substr(-1);
        var divs = document.getElementsByClassName("content");
        var subdivs = divs[0].getElementsByTagName('div');
        for (var i = 0; i < subdivs.length; i++) subdivs[i].style.display = 'none';
        document.getElementById('cont' + target).style.display = 'block';
    };
};

jsFiddle example

【讨论】：