JavaScript插件制作-tab选项卡

JavaScript插件制作练习-鼠标划过选项卡切换图片
<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
            
            body {
                background: #353131;
            }
            
            .warp {
                position: relative;
                top: 50px;
                left: 25%;
            }
            
            ul {
                list-style: none;
            }
            
            ul .warp-li {
                float: left;
                width: 100px;
                height: 40px;
                line-height: 40px;
                background: #000;
                opacity: .3;
                color: #fff;
                text-align: center;
            }
            
            ul .warp-li:hover {
                background: aquamarine;
                color: #000000;
                opopacity: 1;
            }
            
            ul::after {
                display: block;
                content: "";
                clear: both;
            }
            
            .box {
                position: absolute;
                left: 0;
                top: 40px;
                display: none;
            }
            
            .box img {
                width: 500px;
                height: 300px;
            }
            
            #show {
                display: block;
            }
            
            #on {
                background: aquamarine;
                color: #000;
                opopacity: 1;
            }
        </style>
    </head>

    <body>
        <div class="warp">
            <ul>
                <li class="warp-li" id="on">首页</li>
                <li class="warp-li">动漫</li>
                <li class="warp-li">游戏</li>
                <li class="warp-li">生活</li>
                <li class="warp-li">直播</li>
            </ul>
            <div class="box" id="show">
                <img src="img/1.jpg" />
            </div>
            <div class="box">
                <img src="img/18d8bc3eb13533fa3110518aadd3fd1f40345bf4.jpg" />
            </div>
            <div class="box">
                <img src="img/359b033b5bb5c9eab33999fed739b6003bf3b3e1.jpg" />
            </div>
            <div class="box">
                <img src="img/ce4a8e8065380cd7fd58a3eaa944ad3459828123.jpg.png" />
            </div>
            <div class="box">
                <img src="img/timg.jpg" />
            </div>

        </div>
        <script type="text/javascript">
            (function(window) {
                var maxTab = function(tabLen, showLen, tabLenId, showLenId) {
                    this.tabLen = tabLen;
                    this.showLen = showLen;
                    this.tabLenId = tabLenId; //选项卡id
                    this.showLenId = showLenId; //显示区域id
                    this.show();//调用切换图片的方法
                }
                maxTab.prototype = {
                    constructor: maxTab,
                    show: function() {
                        var _this = this; //这里的this是指向maxTab的，function会建里一个作用域所以要保留
                        var tabLen = document.getElementsByClassName(this.tabLen);
                        var showLen = document.getElementsByClassName(this.showLen);
                        var index = 0;
                        for(var i = 0; i < tabLen.length; i++) {
                            tabLen[i].setAttribute("index", i);
                            for(var j = 0; j < tabLen.length; j++) {
                                tabLen[i].onmouseover= function() {
                                    _this.reset(tabLen);
                                    _this.reset(showLen);
                                    this.id = _this.tabLenId;
                                    index = this.getAttribute("index");
                                    showLen[index].id = _this.showLenId;
                                }
                            }
                        }
                    },
                    //格式化id
                    reset: function(obj) {
                        for(var i = 0; i < obj.length; i++) {
                            obj[i].removeAttribute("id");
                        }
                    }
                }
                window.maxTab = maxTab;
            })(window)

            //插件调用
            var am = new maxTab("warp-li", "box", "on", "show");
        </script>
    </body>

</html>
JavaScript插件制作-tab选项卡

猜你喜欢
