一、文字索引效果展示:
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效果显示
原文:http://www.cnblogs.com/ninali/p/3778177.html