简单的页面控制js代码

页面布局大约如下：

<h2>这是标题</h2>

<div>这是内容</div>

<h2>这是标题</h2>

<div>这是内容</div>

<h2>这是标题</h2>

<div>这是内容</div>

需求：希望点击标题的时候，只显示当前标题后面的div内容，其他的div都隐藏只展示未点击过的标题，js代码考虑如下：

function noneAndBlock(t) {

        var oDiv = document.getElementsByTagName("div");

            for (var i = 0; i < oDiv.length; i++) {

                oDiv[i].style.display = "none";

            }

            t.nextSibling .style.display = "block";

    }

所有的标题添加方法调用事件：

<h2 onclick="noneAndBlock(this)">这是标题</h2>

好，测试一下，并没有达到效果，并且报错如下

原因分析：

nextSibling属性返回元素节点之后的兄弟节点（包括文本节点、注释节点即回车、换行、空格、文本等等）；

显然，返回的是集合对象，集合是没有display属性的 ，

使用另一个参数，js代码修改如下：

    function noneAndBlock(t) {

        var oDiv = document.getElementsByTagName("div");

            for (var i = 0; i < oDiv.length; i++) {

                oDiv[i].style.display = "none";

            }

            t.nextElementSibling.style.display = "block";

    }

nextElementSibling属性只返回元素节点之后的兄弟元素节点（不包括文本节点、注释节点）；

需求实现。