zoukankan      html  css  js  c++  java
  • 纯html+css中实现静态选座位效果技巧(input+label使用小技巧)

      很多时候,我们想通过html+css的方式实现排列在后方的代码在选中状态下,能控制排列在前的代码的样式。那么要怎么实现呢?在这里我就要用1个小技巧来完成。

      众所周知的,我们css中的选择器通常只能向下或者同级向下选中,而不能向上选中,这样就对于想控制前面样式的时候带来麻烦。input+label关联的方式即可实现,因为input和label是通过id值来进行关联的,而html中规定了,id值必须唯一,那么我将input放置在html的body下的任意位置,均可实现关联,所以为了实现后方代码控制前方代码,只需要将input放置到前方的代码之前就ok了。

      下面我们举一个例子:我要实现电影院选座的时候,点击下方的1人,即选中1个座位,点击2人  即选中2个座位的效果。

    在这里我选择单选框(input的type类型为radio)。   同时将input的代码放置到main标签下的最开始地方,而label可以放置在后面任意位置,都可以通过id进行关联。这样我在点击‘1人’等按钮的时候,即可选中所需座位。

    html代码如下:

     <main>
            <div>
                <p>激光3号厅银幕</p>
            </div>
            <!-- 推荐选座的input框 -->
            <input name="select" type="radio" id="people1">
            <input name="select" type="radio" id="people2">
            <input name="select" type="radio" id="people3">
            <input name="select" type="radio" id="people4">
            <input name="select" type="radio" id="people5">
            <!-- 选座区 -->
            <section class="num">
    
                <!-- 选座区座位 -->
                <div class="num_r">
                    <!-- 一排 -->
                    <div class="num_r1">
                        <input type="checkbox" id="seat1_01">
                        <label for="seat1_01">
                            <i></i>
                        </label>
                        <input type="checkbox" id="seat1_02">
                        <label for="seat1_02">
                            <i></i>
                        </label>
                        <input type="checkbox" id="seat1_03">
                        <label for="seat1_03">
                            <i></i>
                        </label>
                        <input type="checkbox" id="seat1_04">
                        <label for="seat1_04">
                            <i></i>
                        </label>
                        <input type="checkbox" id="seat1_05">
                        <label for="seat1_05">
                            <i></i>
                        </label>
                        <input type="checkbox" id="seat1_06">
                        <label for="seat1_06">
                            <i></i>
                        </label>
                        <input type="checkbox" id="seat1_07">
                        <label for="seat1_07">
                            <i></i>
                        </label>
                        <input type="checkbox" id="seat1_08">
                        <label for="seat1_08">
                            <i></i>
                        </label>
                        <input type="checkbox" id="seat1_09">
                        <label for="seat1_09">
                            <i></i>
                        </label>
                        <input type="checkbox" id="seat1_10">
                        <label for="seat1_10">
                            <i></i>
                        </label>
                        <input type="checkbox" id="seat1_11">
                        <label for="seat1_11">
                            <i></i>
                        </label>
                        <input type="checkbox" id="seat1_12">
                        <label for="seat1_12">
                            <i></i>
                        </label>
                        <input type="checkbox" id="seat1_13">
                        <label for="seat1_13">
                            <i></i>
                        </label>
                        <input type="checkbox" id="seat1_14">
                        <label for="seat1_14">
                            <i></i>
                        </label>
                        <input type="checkbox" id="seat1_15">
                        <label for="seat1_15">
                            <i></i>
                        </label>
                    </div>
                    <!-- 二排       后面除了id值不一样以为,其他差不多,故省略-->
                    <div class="num_r2">
                   ......  
                    </div>
                </div>
                <p>银幕中央</p>
                <!-- logo背景 --> 
                    <img src="../IMG/logo.png" alt="" class="logo">   
            </section>
            <!-- 推荐选座 -->
            <section class="recommend">
                <p>推荐</p>
                <div>
                    <label for="people1">
                        <p>1人</p>
                    </label>
                    <label for="people2">
                        <p>2人</p>
                    </label>
                    <label for="people3">
                        <p>3人</p>
                    </label>
                    <label for="people4">
                        <p>4人</p>
                    </label>
                    <label for="people5">
                        <p>5人</p>
                    </label>
                </div>
            </section>
        </main>
    

      css代码如下:

    main input{
        display: none;  
    }
    input[id="people1"]:checked~section label[for="seat7_07"]>i{
        background-image: url("../IMG/Screenshot_2016-10-21-17-14-02_07.png");
    }
    input[id="people2"]:checked~section label[for="seat7_07"]>i,
    input[id="people2"]:checked~section label[for="seat7_08"]>i
    {
        background-image: url("../IMG/Screenshot_2016-10-21-17-14-02_07.png");
    }
    input[id="people3"]:checked~section label[for="seat7_07"]>i,
    input[id="people3"]:checked~section label[for="seat7_08"]>i,
    input[id="people3"]:checked~section label[for="seat7_09"]>i
    {
        background-image: url("../IMG/Screenshot_2016-10-21-17-14-02_07.png");
    }
    input[id="people4"]:checked~section label[for="seat7_07"]>i,
    input[id="people4"]:checked~section label[for="seat7_08"]>i,
    input[id="people4"]:checked~section label[for="seat7_09"]>i,
    input[id="people4"]:checked~section label[for="seat7_06"]>i
    {
        background-image: url("../IMG/Screenshot_2016-10-21-17-14-02_07.png");
    }
    input[id="people5"]:checked~section label[for="seat7_07"]>i,
    input[id="people5"]:checked~section label[for="seat7_08"]>i,
    input[id="people5"]:checked~section label[for="seat7_09"]>i,
    input[id="people5"]:checked~section label[for="seat7_06"]>i,
    input[id="people5"]:checked~section label[for="seat7_05"]>i
    {
        background-image: url("../IMG/Screenshot_2016-10-21-17-14-02_07.png");
    }
    

      

  • 相关阅读:
    学指令 emacs篇
    c 排序 总结
    C# WinForm源码下载
    PetShop下载
    Visual Studio常用技巧
    人事信息管理系统(PMS)
    css实现细表格原理
    GridView导出Excel/Word
    dotnet程序员装机必备工具
    容器练习一
  • 原文地址:https://www.cnblogs.com/zhangzhiyong/p/9652215.html
Copyright © 2011-2022 走看看