javascript实现选项卡切换

最新推荐文章于 2020-08-31 13:55:44 发布

问鼎63

最新推荐文章于 2020-08-31 13:55:44 发布

阅读量557

点赞数 1

分类专栏： html与css与js 文章标签： javascript

本文链接：https://blog.csdn.net/baidu_30541191/article/details/50278785

版权

html与css与js 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

javascript实现选项卡切换

项目截图：

项目代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>实践题 - 选项卡</title>
    <style type="text/css">
     /* CSS样式制作 */  
     *{
         padding:0px;
         margin:0px;
         font:12px normal "microsoft yahei";
     }
     #tabs{
         width:270px;
         padding:5px;
         height:150px;
         line-height:20px;
     }
     #tabs ul{
         list-style:none;
         display:block;
         height:30px;
         line-height:30px;
         border-bottom:2px solid saddlebrown ;
     }
     #tabs ul li{
         background:#fff;
         cursor:pointer;
         float:left;
         height:28px;
         line-height:28px;
         margin:0 3px;
         border:1px solid #aaa;
         border-bottom :none;
         display:inline-block;
         width:60px;
         text-align:center;
     }
     #tabs ul li.on{
         border-top:2px solid saddlebrown ;
         border-left:2px solid saddlebrown ;
         border-right:2px solid saddlebrown ;
         //border-bottom:2px solid #fff;
         background:saddlebrown;
         color:white;
     }
     #tabs div{
         height:120px;
         line-height:25px;
         border:1px solid #369;
         border-top:none;
         padding:5px;
     }
     .hide{
         display:none;
     }
    </style>
    <script type="text/javascript">
         
    // JS实现选项卡切换
    window.οnlοad=function(){
        var oTab=document.getElementById("tabs");
        var oUl=oTab.getElementsByTagName("ul")[0];
        var oLis=oUl.getElementsByTagName("li");
        var oDivs=oTab.getElementsByTagName("div");
        
        for(var i=0,len=oLis.length;i<len;i++){
            oLis[i].index=i;
            oLis[i].οnmοuseοver=function(){
                for(var n=0;n<len;n++){
                    oLis[n].className="";
                    oDivs[n].className="hide";
                }
            this.className="on";
            oDivs[this.index].className="";
            }
        };
    }
    
    </script>
 
</head>
<body>
<!-- HTML页面布局 -->
<div id="tabs">
    <ul>
        <li class="on">客至</li>
        <li>蜀相</li>
        <li>锦瑟</li>
    </ul>
    <div>
        舍南舍北皆春水，但见群鸥日日来。<br>
　　花径不曾缘客扫，蓬门今始为君开。<br>
　　盘飧市远无兼味，樽酒家贫只旧醅。<br>
　　肯与邻翁相对饮，隔篱呼取尽馀杯！<br>
    </div>
    <div class="hide">
        丞相祠堂何处寻？锦官城外柏森森。<br>
　　映阶碧草自春色，隔叶黄鹂空好音。<br>
　　三顾频烦天下计，两朝开济老臣心。<br>
　　出师未捷身先死，长使英雄泪满襟！<br>
    </div>
    <div class="hide">
         锦瑟无端五十弦，一弦一柱思华年。<br>
　　庄生晓梦迷蝴蝶，望帝春心托杜鹃。<br>
　　沧海月明珠有泪，蓝田日暖玉生烟。<br>
　　此情可待成追忆，只是当时已惘然。<br>
    </div>
</div>

</body>
</html>