码迷,mamicode.com
首页 > 其他好文 > 详细

工作需求——JQ小效果分享下

时间:2014-06-10 09:44:34      阅读:227      评论:0      收藏:0      [点我收藏+]

标签:c   style   class   blog   code   java   

一、文字索引效果展示:

html布局代码

bubuko.com,布布扣
<ul class="n_areaList">
            <li>
                <h5>当前选择区域</h5>
                <p>北京市</p>
            </li>
            <li>
                <h5>定位区域</h5>
                <p>北京市</p>
            </li>
            <li>
                 <h5>A</h5>
                 <a href="javascript:;">安丘市</a>
                 <a href="javascript:;">安国市</a>
                 <a href="javascript:;">安宁市</a>
                 <a href="javascript:;">安庆市</a>
                 <a href="javascript:;">安阳市</a>
                 <a href="javascript:;">安达市</a>
            </li>
            <li>
                 <h5>B</h5>
                 <a href="javascript:;">包头市</a>
                 <a href="javascript:;">本溪市</a>
                 <a href="javascript:;">泊头市</a>
                 <a href="javascript:;">滨州市</a>
            </li>
        </ul>
bubuko.com,布布扣

 

jQuery效果代码

bubuko.com,布布扣
<script>
        $(function () {
            $(".n_areaList li a").click(function () {
                $(".n_areaList li p").html($(this).html());
            });
        })
</script>
bubuko.com,布布扣

 

jQuery效果显示:手机端显示

 bubuko.com,布布扣

 

二、添加选项效果展示:

html布局代码

bubuko.com,布布扣
<div class="n_formlist">
          <ul style="list-style:none;">
                <li>选项: <input type="text" value="" id="" class="n_text">
                    <input type="radio" value="" id="" name="nn" class="n_radio">需填写
                </li>
                <li>选项: <input type="text" value="" id="" class="n_text">
                    <input type="radio" value="" id="" name="nn" class="n_radio">需填写
                </li>
          </ul>
          <div><a href="javascript:;" class="n_add">添加选项</a></div>
          <div class="n_btn">
              <input type="submit" value="保 存" id="" tabindex="0">
              <input type="submit" value="取 消" id="" tabindex="0" class="n_reset">
          </div>
    </div>
bubuko.com,布布扣

注:单选按钮:radio属性只能单选的情况下,必须name="统一名字即可"

 

jQuery效果代码

bubuko.com,布布扣
<script type="text/javascript">
        $(function(){
            $(".n_add").click(function(){
                 $(".n_formlist ul").append(
                 "<li>选项: <input type=‘text‘ value=‘‘ id=‘‘ class=‘n_text‘> <input type=‘radio‘ value=‘‘ id=‘‘ name=‘nn‘ class=‘n_radio‘>需填写</li>")
            });    
        });
    </script>
bubuko.com,布布扣

 

jQuery效果显示

 bubuko.com,布布扣

 

 

工作需求——JQ小效果分享下,布布扣,bubuko.com

工作需求——JQ小效果分享下

标签:c   style   class   blog   code   java   

原文地址:http://www.cnblogs.com/ninali/p/3778177.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!