js制作tab选项卡

最新推荐文章于 2024-06-05 16:14:30 发布

dengshaji4419

最新推荐文章于 2024-06-05 16:14:30 发布

阅读量92

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/7-Eleven/p/5519218.html

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jstab标签</title>
    <style type="text/css">
        *{margin: 0;padding: 0;list-style: none;text-decoration: none;}
        .main{width: 298px;height: 98px;border: 1px solid #000;margin: 30px auto 0;overflow: hidden;}
        .tit{width: 298px;overflow: hidden;background-color: #ccc}
        .tit ul li{float: left;width: 20%;height: 28px;text-align: center;line-height: 28px}
        .tit ul li.select{background-color: #fff}
        .tit ul{overflow: hidden;}
        .con{overflow: hidden;}
        .con ul li{width: 298px;height: 70px;overflow: hidden;display: none;}
    </style>
</head>
<body>
    <div class="main" id="main">
        <div id="tit" class="tit">
            <ul>
                <li class="select">首页</li>
                <li>开始</li>
                <li>菜单</li>
                <li>选项</li>
                <li>备注</li>
            </ul>
        </div>
        <div id="con" class="con">
            <ul>
                <li style="display: block;">内容1</li>
                <li>内容2</li>
                <li>内容3</li>
                <li>内容4</li>
                <li>内容5</li>
            </ul>
        </div>
    </div>
    <script type="text/javascript">
        function $(id){
            return typeof id ==='string'?document.getElementById(id):id;
        };
        window.onload = function(){
            // 获取鼠标滑过或点击的标签要和切换内容的元素
            var title = $('tit').getElementsByTagName('li');
            var lis = $('con').getElementsByTagName('li');
            if (title.length!=lis.length)
                return;
            for(var i = 0;i<title.length;i++){
                // 遍历tit下的所有li
                title[i].top=i;
                title[i].onmouseover=function(){
                    for (var j = 0;j<title.length;j++) {
                        // 遍历con下的所有li
                        title[j].className=''
                        lis[j].style.display='none';
                    };
                    this.className="select";
                    lis[this.top].style.display='block';
                }
            }
        }
    </script>
</body>
</html>

转载于:https://www.cnblogs.com/7-Eleven/p/5519218.html

dengshaji4419

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js制作tab选项卡

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>jstab标签</title> <style type="text/css"> *{margin: 0;pad...
复制链接

扫一扫