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

一、文字索引效果展示：

html布局代码

<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>

 

jQuery效果代码

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

 

jQuery效果显示:手机端显示

 

 

二、添加选项效果展示：

html布局代码

<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>

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

 

jQuery效果代码

<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>

 

jQuery效果显示