0

我真的需要一些帮助，我想知道通过单击仅使用没有 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>
4

2 回答 2

1

只需尝试修复您的代码。

  1. [0]后添加缺失document.getElementsByClassName("content")
  2. 更改getElementsByClassName()为querySelectorAll()以在 IE8 中工作
  3. 将变量更改i为navList.children[i].onclick记忆变量index
  4. 将变量i起始值更改为0
  5. index + 1作为 dest传递，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);
    }
}

希望这有帮助。

于 2013-04-23T04:14:00.837 回答
0

试试这个：

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 示例

于 2013-04-08T17:21:42.413 回答