JS简易选项卡

<!DOCTYPE html>
<html>
    <head>
        <title>简易选项卡</title>
        <style type="text/css">
            *{ margin: 0px; padding: 0px; text-align: center; }
            ul{ list-style-type: none; }
            .bpp5{ left: 468px; top: 60px; position: relative;}
            .item{ width: 267px; height: 300px; position: relative; }
            .item li{ float: left; height: 40px; padding-left: 20px; padding-right: 20px; line-height: 40px; border: 0.5px solid #333333; cursor: pointer; color: #ffffff; }
            .content{ width: 267px; height: 260px; top: 40px; left: 0px; clear: both; position: absolute; z-index: 0; font-size: 200px; line-height: 260px; }
        </style>
    </head>
    <body>
        <div class="bpp5">
            <ul class="item">
                <li>第一课
                    <div class="content" style="z-index: 2";></div>
                </li>
                <li>第二课
                    <div class="content"></div>
                </li>
                <li>第三课
                    <div class="content"></div>
                </li>
            </ul>
        </div>
        
        
        <script type="text/javascript">
            // 创建选项卡类
            var content_txt = [
                {text: '0', color: "orange"},
                {text: '1', color: "pink"},
                {text: '2', color: "blue"}
            ];
            // 初始值函数
            var cleanactive = function(arr){
                for(var i = 0; i < arr.length; i++){
                    arr[i].style.color = "#fff";
                    arr[i].style.backgroundColor = "#333";
                    arr[i].children[0].style.zIndex = "0";
                }
            }
            window.onload = function(){
                // 获取元素
                var items = document.getElementsByClassName("item")[0].getElementsByTagName("li");
                // 生成选项卡内容
                for(var i = 0; i < items.length; i++){
                    items[i].style.backgroundColor = "#333";
                    items[i].children[0].innerHTML = content_txt[i].text;
                    items[i].children[0].style.backgroundColor = content_txt[i].color;
                }
                // 遍历点击事件
                for(i = 0; i < items.length; i++){
                    // console.log(items[i].children[0]);
                    items[i].onclick = function(){
                        cleanactive(items);
                        this.style.color = "#333";
                        this.style.backgroundColor = "#ccc";
                        this.children[0].style.zIndex = "2";
                    }
                }
            }
        </script>
    </body>
</html>
猜你喜欢
