简单的页面控制js代码

页面布局大约如下:

这是标题

这是内容

这是标题

这是内容

这是标题

这是内容

需求:希望点击标题的时候,只显示当前标题后面的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";

    }

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

这是标题

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


原因分析:

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属性只返回元素节点之后的兄弟元素节点(不包括文本节点、注释节点);

需求实现。

你可能感兴趣的:(简单的页面控制js代码)