<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <style> #box{ width:400px; height:400px; border:1px solid red; margin:0 auto; } header{ height:80px; width:399px; border:1px solid green; } header ul{ list-style-type: none; word-spacing:80px; } header ul li{ display:inline-block; line-height: 40px; } a{ text-decoration: none; color:#000; } a:hover{ text-decoration: none; color:red; } footer{ width:390px; height:50%; border:1px solid #fff; } footer ul{ list-style-type: none; } footer ul li{ display: none; } #div1{ width:398px; height:340px; position: absolute; top:60px; display: none; } </style> <body> <div id="box"> <header> <ul> <li><a href="#" id="qjg">关羽</a></li> <li><a href="#" id="rhx">张飞</a><span class="glyphicon glyphicon-triangle-bottom" id="xialai" style="margin-top:30px;"></span></li> <li><a href="#" id="zx">刘备</a></li> </ul> </header> <footer> <ul> <li style="display:block;" id="qjg1">好与不好都走了，幸与不幸都过了。真正的梦想，永远在实现之中，更在坚持之中。</li> <li id="rhx1"> 太在乎别人的眼光和评价，只会让自己做事放不开手脚，犹豫不决。</li> <li id="zx1">请磨掉自己身上的躁气和戾气，平静地面对生活。</li> </ul> </footer> <div id="div1"> wqeqweqweqw </div> </div> <script> window.onload=function () { var qjg=document.getElementById(‘qjg‘); var rhx=document.getElementById(‘rhx‘); var zx=document.getElementById(‘zx‘); var xialai=document.getElementById(‘xialai‘); var oDiv=document.getElementById(‘div1‘); rhx.onmouseover=function () { qjg1.style.display=‘none‘; rhx1.style.display=‘block‘; } zx.onmouseover=function () { qjg1.style.display=‘none‘; rhx1.style.display=‘none‘; zx1.style.display=‘block‘; } qjg.onmouseover=function () { qjg1.style.display=‘block‘; rhx1.style.display=‘none‘; zx1.style.display=‘none‘; } xialai.onmouseover=function () { oDiv.style.display=‘block‘; } xialai.onmouseout=function () { oDiv.style.display=‘none‘; } }; </script> </body> </html> WEB前端学习交流群21 598399936 |
tab切换原生js新手
原文地址：http://www.cnblogs.com/luludehuhuan/p/8033960.html