zoukankan      html  css  js  c++  java
  • 前端学习笔记之选座位

    <!DOCTYPE html>
    <html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>选座位</title>
        <style>
            ul {
                display: flex;
                list-style: none;
            }

            ul li {
                display: block;
                 41px;
                height: 35px;
                background: url("../DOM/img/seat.jpg");
                background-position: 50px 0;
            }

            .change {
                background: url("../DOM/img/seat.jpg");
                background-position: 0 0;
            }
        </style>
    </head>

    <body>
        <ul>
            <li class="change"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <script>
            let ul = document.querySelector("ul");
            let list = ul.children;
            for (let item of list) {
                item.onclick = function () {
                    change="";
                    item.className == "change" ? item.className = "" : item.className = "change";
                }
            }
        </script>
    </body>

    </html>
  • 相关阅读:
    2011年10月小记
    修改模拟器hosts文件
    2011年9月小记
    解决IIS7.5站点不能登录SQLEXPRESS
    EF 4.3 CodeBased Migrations
    2012年5月 小记
    Android对SD卡进行读写
    Tomcat for Eclipse
    ARR2.5 配置反向代理
    作业2浅谈数组求和java实验
  • 原文地址:https://www.cnblogs.com/Yangyecool/p/13171705.html
Copyright © 2011-2022 走看看