隐藏和显示元素，方法是使用Java Script而不使用Jquery [英] Hide and Show elements by clicking on a link with Java Script without Jquery

问题描述

我真的需要一些帮助，我想知道什么是最好的方式隐藏和显示元素通过点击链接只使用Java Script没有Jquery。

I really need some help, I wanna know what's the best way to hide and show elements by clicking on a link just using Java Script without Jquery.

所以，当我点击链接1需要添加类活动，只是< div id =应该显示cont1> 。

So, when I click on the "Link 1" need to add the "class active" and just the "<div id="cont1">" should be shown while the others should be hidden.

其他的事情是可以添加更多的HTML链接和内容，而不必更改JS代码。

Other thing, is do this with the possibility to add more HTML Links and Content in the future, without the necessity to change the JS code.

如果有人帮助我，我将永远感激。

I will be eternally grateful if someone help me!

遵循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. 在之后添加缺少的 [0] document.getElementsByClassName ）


2. 更改 getElementsByClassName（）到 querySelectorAll（）以便在IE8中工作


3. 在 navList.children [i]中更改变量 i 。 onclick 到记忆变量索引


4. 更改变量 i 开始值 0


5. 通过 index + 1 mudaConteudo（），因为索引从0开始，但您的内容ID以1开头

1. add missing [0] after document.getElementsByClassName("content")
2. change getElementsByClassName() to querySelectorAll() in order to work in IE8
3. change variable i in navList.children[i].onclick to remembered variable index
4. change variable i start value to 0
5. pass index + 1 as a dest of mudaConteudo() since index start with 0 but your content ids start with 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);
    }
}

希望有帮助。

这篇关于隐藏和显示元素，方法是使用Java Script而不使用Jquery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！