Javascript 在不使用Jquery的情况下，通过单击带有Java脚本的链接来隐藏和显示元素

我真的需要一些帮助，我想知道什么是隐藏和显示元素的最好方法，只需单击一个链接，使用Java脚本而不使用Jquery

因此，当我点击“链接1”时，需要添加“类活动”，只显示“

”而其他的应该隐藏

另一件事是，将来可以添加更多的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>

内容1

内容2

内容3

内容4

试试这个：

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

var list=document.getElementsByTagName（'ul'）；
var links=list[0]。getElementsByTagName（'a'）；
对于（变量i=0；i

---

只要尝试修复代码即可

在

文档之后添加缺少的
[0]
。getElementsByClassName（“内容”）

将

getElementsByClassName（）

更改为

querySelectorAll（）

，以便在IE8中工作

将

navList.children[i]中的变量
i
更改为记住的变量
index

将变量

i

start值更改为

0

将

index+1

作为

mudaconetudo（）

的目标传递，因为索引以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);
    }
}

window.onload=函数（）{
功能mudaConteudo（elm、dest）{
var divs=document.querySelectorAll（“.content”）[0].getElementsByTagName（'div'）；
对于（变量i=0，len=divs.length；i

---

希望有帮助。

您的代码需要与哪些浏览器兼容？我正在尝试，但无法做到，所以我不想弄乱您的逻辑。需要交叉浏览器，主要与铬，FF和IET的脚本是断线。。。当我调试时，很多行是未定义的。。。例如：TypeError:document.querySelectorAll（…）[0]未定义另一个：TypeError:navList未定义（var i=0，len=navList.children.length；i