事件委託選項卡

時間 2019-11-18

標籤事件委託選項简体版

原文原文鏈接

事件委託選項卡,效果圖

html

<!DOCTYPE html>
<document>
    <html>

    <head>
        <meta charset="utf-8">
        <title>選項卡</title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
                font-family: "微軟雅黑";
                font-size: 14px;
            }

            #container {
                width: 398px;
                margin: 100px auto;
            }

            #container a {
                display: block;
                width: 98px;
                height: 42px;
                line-height: 42px;
                text-align: center;
                float: left;
                border-top: solid 1px #FF4400;
                border-bottom: solid 1px #FF4400;
                border-left: solid 1px #FF4400;
                color: #333333;
                text-decoration: none;
            }

            #container a:hover {
                color: #FF4400;
            }

            .content {
                width: 355px;
                height: 140px;
                text-align: center;
                border-right: solid 1px #FF4400;
                border-bottom: solid 1px #FF4400;
                border-left: solid 1px #FF4400;
                padding: 30px 0 0 40px;
                display: none;
            }

            .clear {
                clear: left;
            }

            #container a.on {
                background: #FF4400;
                color: #fff;
            }
        </style>

    </head>

    <body>
        <div id="container">
            <!--a.className = ""-->
            <a href="#" class="on">充話費</a>
            <!--a.className = "on"-->
            <a href="#">充流量</a>
            <a href="#">充固話</a>
            <a href="#" style="border-right: solid 1px #FF4400;">充寬帶</a>

            <div class="clear"></div>
            <div class="content" style="display:block;">
                <img src="images/1.png" />
            </div>
            <div class="content">
                <img src="images/2.png" />
            </div>
            <div class="content">
                <img src="images/3.png" />
            </div>
            <div class="content">
                <img src="images/4.png" />
            </div>
        </div>
        <p></p>
    </body>

    </html>
</document>
<script src="../common.js"></script>
<script type="text/javascript">
    let $container = $('#container');
    let $a = $A('a');
    let $content = $A('.content');

    $container.onclick = function(e){
        e = e || window.event;
        let target = e.target || e.srcElement;
        if(target.nodeName == "A"){
            for(let i = 0;i < $a.length;i ++){
                // console.log(target)
                $a[i].className = "";
                $a[i].index = i;
                $content[i].style.display = "none";
            }
            target.className = "on";
            $content[target.index].style.display = "block";
        }
    }

</script>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。