首页 > 代码库 > 点击同类选项出现文字

点击同类选项出现文字

2024-07-03 07:24:04   226人阅读

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

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

<html>
    <head>
        <title>wiming</title>
        <meta http-equiv="content-type" content="text/html;charset=utf-8">
        <link href=http://www.mamicode.com/"../css/buy_now.css" rel="stylesheet" type="text/css">
        <script src=http://www.mamicode.com/"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>

 


联系
我们