• 点击同类选项出现文字


    今天写一个订单页面时,要求:在多个地址中选择一个时,被选择的地址前面要有文字出现。

    完成这个问题后,自己写一个简单的。

    <html>
        <head>
            <title>wiming</title>
            <meta http-equiv="content-type" content="text/html;charset=utf-8">
            <script src="http://cdn.bootcss.com/jquery/2.1.0/jquery.min.js"></script> 
            <style type="text/css">
                p{ 
                    text-align:center;
                }
                .fruit-list{
                    margin:0 auto;
                    margin-top:20px;
                    text-align:center;
                 }
                 .fruit-list:hover{ 
                     background-color:#FF5511;
                 }
                 .mylove-list{
                     display:none;
                 }
                 .on .mylove-list{ 
                     display:inline;
                 }
            </style>
            <script type="text/javascript">
                 $(function(){ 
                         $(".fruit-list").click(function(){
                             $(".fruit-list").removeClass("on")
                             $(this).addClass("on")
                             })
                         })
            </script>
        </head>
        <body>
            <p>点你喜欢的水果?</p>
            <div class="fruit-list">
                <span class="mylove-list">我喜欢
                </span>
                <label>苹果
                </label>
            </div>
            <div class="fruit-list">
                <span class="mylove-list">我喜欢
                </span>
                <label>西瓜
                </label>
            </div>
            <div class="fruit-list">
                <span class="mylove-list">我喜欢
                </span>
                <label>芒果
                </label>
            </div>
            <div class="fruit-list">
                <span class="mylove-list">我喜欢
                </span>
                <label>雪梨
                </label>
            </div>
        </body>
    </html>
  • 相关阅读:
    poj 1080 dp
    Codeforces Round #280 (Div. 2)
    Codeforces Round #279 (Div. 2)f
    Codeforces Round #278 (Div. 1)
    Codeforces Round #276 (Div. 1)
    搜索
    debug 心得
    ZOJ 1633
    DRF 一对多序列化与反序列化
    HTTP协议
  • 原文地址:https://www.cnblogs.com/wiming/p/3712891.html
Copyright © 2020-2023  润新知