首页 > 代码库 > 工作需求——JQ小效果分享下
工作需求——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=http://www.mamicode.com/‘‘ id=‘‘ class=‘n_text‘> 需填写") }); }); </script>
jQuery效果显示
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。