选项卡切换

最新推荐文章于 2021-11-13 09:38:14 发布

天空之枫

最新推荐文章于 2021-11-13 09:38:14 发布

阅读量368

点赞数 1

本文链接：https://blog.csdn.net/sinat_24713805/article/details/53509800

版权

先讲下选项卡切换的原理，就是有多个栏目，点击其中一个栏目出现内容，点击另一个栏目原先栏目的内容隐藏，在原来的位置切换到对应栏目的内容，主要是通过javascript来实现display属性的显示或隐藏。

架子部分我随便找了点

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>实践题 - 选项卡</title>
</head>
<body>
<div id="tab-list">
    <ul id="ul1">
        <li class="active">选项1</li><li>选项2</li><li>选项3</li>
    </ul>
    <div>
        <ul>
            <li><a href="javascript:;">内容1</a></li>
          
        </ul>
    </div>    
    <div class="hide">
        <ul>
            <li><a href="javascript:;">内容2</a></li>
        </ul>
    </div>    
    <div class="hide">
        <ul>
            <li><a href="javascript:;">内容3</a></li>
        </ul>
    </div>
</div>

 
</body>
</html>

css部分稍微装饰一下，其中hide的属性display：none；而不是display：hidden；

       *{margin:0;padding:0;font:normal 12px "微软雅黑";color:#000000;}
     ul{list-style-type: none;}
     a{text-decoration: none;}
     #tab-list{width: 275px;height: 60px;margin: 20px auto;}
     #ul1{border-bottom: 2px solid #8B4513;height: 32px; }
     #ul1 li{float: left;width: 60px;line-height: 30px;text-align: center;border: 1px solid #999;border-bottom: none;margin-left: 5px;}
     #ul1 li.active{border-top:2px solid #8B4513;border-bottom: 2px solid #fff; }
     #tab-list div{border:1px solid #739688;border-top: none;}
     #tab-list div li{height:60px;line-height: 60px;text-indent: 8px;}
     .hide{display: none;}

js部分

<script type="text/javascript">
         
    window.onload = function() {
        var oUl1 = document.getElementById("ul1");
        var aLi = oUl1.getElementsByTagName("li");
        var oDiv = document.getElementById("tab-list");
        var aDiv = oDiv.getElementsByTagName("div");
        for(var i = 0; i < aLi.length; i++) {
            aLi[i].index = i;
            aLi[i].onmouseover = function() {
                for(var i = 0; i < aLi.length; i++) {
                    aLi[i].className = "";
                }
                this.className = "active";
                for(var j = 0; j < aDiv.length; j++) {
                    aDiv[j].className = "hide";
                }
                aDiv[this.index].className = "show";
            }        
        }
    }
    
    
    </script>

天空之枫

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
选项卡切换

先讲下选项卡切换的原理，就是有多个栏目，点击其中一个栏目出现内容，点击另一个栏目原先栏目的内容隐藏，在原来的位置切换到对应栏目的内容，主要是通过javascript来实现display属性的显示或隐藏。架子部分我随便找了点实践题 - 选项卡选项1选项2选项3
复制链接

扫一扫

选项卡切换

“相关推荐”对你有帮助么？