zoukankan      html  css  js  c++  java
  • 工作需求——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效果显示

     

  • 相关阅读:
    二:虚拟游戏摇杆
    一:AndEngine的小例子
    打造属于自己的安卓Metro界面
    linux设备驱动第四篇:驱动调试方法
    C# 二叉查找树实现
    初识 Angular 体会
    C# 霍夫曼二叉树压缩算法实现
    TypeScript笔记[5]泛型+Dictionary 转
    Axiom3D学习日记 5.Frame Listeners, and Input Handling
    Axiom3D学习日记 4.地形,天空,雾
  • 原文地址:https://www.cnblogs.com/ninali/p/3778177.html
Copyright © 2011-2022 走看看