利用 js +css和iframe 制作一个目录导航界面

来源：互联网发布：java 内嵌chrome 编辑：程序博客网时间：2024/06/04 20:01

一、关于原生js获取上一个兄弟节点以及子节点的问题

1.获得上一个兄弟节点

previousElementSibling 这个方法可以获得

2.获取第一个子节点

子节点要先全部获取，然后排除 text元素，然后在获取第一个子节点

传送门，这里有介绍

3.原生js 修改样式

不能用setattribute 要用 obj.className = "Triangle";//替换样式 obj.className += " "+ "Triangle";//追加样式

二、利用纯CSS画图标

传送门

三、代码

<!doctype html><html lang="en"> <head>  <meta charset="UTF-8">  <title>Document</title> </head><script type="text/javascript">function f(str){//当前节点    var sub_menu = document.getElementById(str);//当前节点的上一个兄弟节点var cjn =sub_menu.previousElementSibling;//排除子节点中的text元素/*标签与标签之间不能换行，每当你换行JS 默认会把换行当成text元素加入到数组中*/var elem_child = cjn.childNodes;        for(var i=0 in elem_child){ //遍历子元素数组            if(elem_child[i].nodeName == "#text" && !/\S/.test(elem_child[i].nodeValue)) {                //删除数组中的text                cjn.removeChild(elem_child[i]);            }        }//获得第一个子节点var cjnfc = cjn.firstChild;    var dis_v = sub_menu.style.display;    if(dis_v == "block"){        sub_menu.style.display = "none";cjnfc.className = "Triangle";//替换样式} else{        sub_menu.style.display = "block";cjnfc.className = "InvertedTriangle";}}</script> <style type="text/css">#db1,#db2,#db3{display: none;} #page{        width:1280px;        margin:0 auto;        text-align:center;        background-color:#F8F8F8;        border: solid 1px #E7E7E7;    }    #head{        width:1275px;    }    #content{        margin:0 auto;        width:1275px;        overflow: auto;    }    #left{        position:absolute;        height:700px;        overflow:auto;        background-color:#E7E7E7;        border:1px solid #E7E7F8;        float:left;        text-align:left;        width:250px;    }    #right{        padding-right:5px;        float:right;        width:1000px;        height: auto;        min-height: 700px;        overflow: hidden;    }    iframe{        width: 100%;        min-height: 700px;        height: auto;    }    ul,li{        list-style-type:none;        text-align:left;        margin:0px;        padding:6px;    }    li ul li{        padding-left:13px;    }    a:link{        color: #000;        text-decoration:none;    }    a:visited{        color: #000;        text-decoration:none;    }    a:hover{        color: #ff0000;        text-decoration:none;    }    a:active{        color: #ff0000;        text-decoration:none;    }/* 纯CSS 画图标 */    .InvertedTriangle {        text-align:center;        width:0px;        height:0px;        float:left;        border-top:10px solid #000000;        border-left:5px solid transparent;        border-right:5px solid transparent;        position: relative;        top: 5px;        right: 8px;    }    .Triangle {        text-align:center;        padding-right:5px;        width: 0;        height:0;        float: left;        border-left: 10px solid #000000;        border-top: 5px solid transparent;        border-bottom: 5px solid transparent;        position: relative;        top: 5px;        right: 5px;    } </style> <body><div id="page"><div id="head" style="width:100%;hegint:50px;"><h1>Mysql数据库</h1></div><div id="content"><div id="left"><p>数据库地址是127.0.0.1</p><ul><li><span onclick="f('db1')"><span class="Triangle"></span><span>数据库一</span></span><ul id="db1"><li>表一</li><li>表二</li><li>表三</li></ul></li><li><span onclick="f('db2')"><span class="Triangle"></span><span>数据库二</span></span><ul id="db2"><li><a href="https://www.baidu.com" target="myFrameName">表一</a></li><li>表二</li><li>表三</li></ul></li><li><span onclick="f('db3')"><span class="Triangle"></span><span>数据库三</span></span><ul id="db3"><li>表一</li><li>表二</li><li>表三</li></ul></li></ul></div><div id="right"><iframe id="myFrameName" width="100%" height="100%" scrolling="no" name="myFrameName" frameborder="0" ></iframe></div></div></div> </body></html>

阅读全文

0 0