带参数选项卡：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />

    <!--当网站添加到主屏幕快速启动方式，可隐藏地址栏，仅针对ios的safari-->

    <meta content="yes" name="apple-mobile-web-app-capable" />

    <!--指定的iphone中safari顶端的状态条的样式-->

    <meta content="black" name="apple-mobile-web-app-status-bar-style" />

    <!--告诉设备忽略将页面中的数字识别为电话号码-->

    <meta content="telephone=no" name="format-detection" />

    <title>原生带参数切换</title>

    <style type="text/css">

        html{max-width: 640px;margin:0 auto;}

        body,h1,h2,h3,h4,h5,h6,p,ul,form,textarea,dd,p,div,dl,dt,dd,input,table,th,td{margin:0;padding:0;}

        body{font:14px/1.5 'Microsoft YaHei', 'Helvetica', 'Arial', sans-serif;background-color: #d2cfbb;color:#3d3d3d;max-width: 640px;margin: 0 auto}

        input,img{border:none;}

        ol,ul {list-style:none}

        .xm_con {overflow: hidden;border: 1px solid #a9a489;background-color: #fcf8e6;}

        .xm_tab_item{ overflow: hidden; background-color: #a9a489; }

        .xm_tab_item li{ float: left; width: 50%; height: 36px; line-height: 36px; text-align: center; border-bottom:1px solid #a9a489; background-color: #f4efd9;box-sizing: border-box; }

        .xm_tab_item li.current{ background-color: #fcf8e6; border-bottom:1px solid #fcf8e6; }

        .xm_tab_item li:first-child{border-right:1px solid #a9a489;}

        .xm_tab_item li a{ display: block; }

        .xm_tab_box{ padding: 10px; }

        .xm_tb_list{ overflow: hidden; }

        .xm_tb_form{ overflow: hidden; }

        .xm_tb_form_l{ float: left; width: 30%}

        /*公共单选框*/

        .public_radio{ width: 0; padding: 0; background: transparent; }

        .xm_tb_form_l .public_radio + label{-webkit-appearance: none; background-color: #fffef7; border: 1px solid #d3ccb0; box-shadow:inset 0px 2px 3px rgba(188,185,180,1); width: 22px; height: 22px; border-radius: 50px; display: inline-block; position: relative; vertical-align: middle; margin-right: 5px;}

        .xm_tb_form_l .public_radio:checked + label:after {content: ' '; width: 16px; height: 16px; border-radius: 50px; position: absolute; top: 3px; background: #cc3300 ; background-size: 11px 8px; text-shadow: 0px; left: 3px; font-size: 32px; }

        .xm_tb_form_l span{ display: inline-block; width: 40px; text-align: center; color: #8d8d8d; float: left; font-size: 12px }

        .xm_tb_form_l span label{ display: block; }

        .xm_tb_form_r{ float: right; width: 70%; margin-top: 5px; }

        .xm_tb_form_r .inpt{ height: 32px; line-height: 32px; border:1px solid #cdc6a8; background-color: #fffef7; box-shadow: inset 0 2px 3px #bcb9b5;display: block; float: left; padding: 0 5px; width: 70%; box-sizing: border-box;}

        .xm_tb_form_r .btn{ background-color: #cc3300;border:1px solid #cc3300; color: #fff; height: 32px; line-height: 32px; display: block; float: left; width: 30%; box-sizing: border-box; }

    </style>

</head>

<body>

    <form action="/qvmingdafen.html" method="post" id="qmdfForm">

        <div class="xm_con">

            <ul class="xm_tab_item">

                <li class="current" id="tab_nan" data-value="0" onclick="toggleNav('#tab_nan', '#tab_nv')">男</li>

                <li id="tab_nv" data-value="1" onclick="toggleNav('#tab_nv', '#tab_nan')">女</li>

                <input type="hidden" id="sex" name="sex" value="0">

            </ul>

            <div class="xm_tab_box">

                <div class="xm_tb_list">

                    <div class="xm_tb_form">

                        <div class="xm_tb_form_l" id="div2">

                            <span class="on">

                                <input type="radio" name="num" value="1" id="radio_1_1" class="public_radio"

                                       checked="checked">

                                <label for="radio_1_1"></label><p>单姓</p></span>

                            <span>

                                <input type="radio" name="num" value="2" id="radio_1_2" class="public_radio">

                                <label for="radio_1_2"></label><p>复姓</p>

                            </span>

                        </div>

                        <div class="xm_tb_form_r">

                            <input type="text" placeholder="请输入姓名" class="inpt" id="username" name="username"/>

                            <input type="hidden" id="xing" name="xing" value="">

                            <input type="hidden" id="ming" name="ming" value="">

                            <input type="button" value="开始打分" class="btn" id="qmdafenBtn"/>

                        </div>

                    </div>

                </div>

            </div>

        </div>

    </form>

    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js" type="text/javascript"></script>

    <script type="text/javascript">

    //男、女切换

    function toggleNav(obj, id) {

        console.log("obj",obj)

        console.log("id",id)

        $(obj).attr('class', 'current');

        $(id).attr('class', '');

        $('#sex').val($(obj).attr('data-value'));

    };

    //表单验证

    $('#qmdafenBtn').on('click',function(event){

        var i = $("input[name='num']:checked").val();

        var xingming = $("#username").val();//姓名

        var xing = '';

        var ming = '';

        var pattern = /^[\u4e00-\u9fa5]*$/;

        if (!pattern.test(xingming)) {

            alert("姓名必须为中文");

            $("#username").focus();

            return false;

        }

        if (xingming == '') {

            alert("姓名不能为空");

            $("#username").focus();

            return false;

        }

        if (i == 1) {

            //单姓

            xing = xingming.substr(0, 1);

            ming = xingming.substr(1);

            if (ming.length == '') {

                alert("名字不能为空");

                return false;

            }

        } else {

            xing = xingming.substr(0, 2);

            ming = xingming.substr(2);

            if (ming.length == '') {

                alert("名字不能为空");

                return false;

            }

        }

        if (ming.length > 2) {

            alert("名字不能多于两个汉字");

            return false;

        }

        $('#xing').val(xing);

        $('#ming').val(ming);

        $.post("qvmingdafen.html", { xing: xing, ming: ming } ,function(data){

            if(data.code==0){

                // alert(data.msg);

                alert("未成功提示")

            }else{

                // $('#qmdfForm').submit();

            }

        });

        return false;

    })

</script>

</body>

</html>

效果图：

jquery带参数选项卡4的更多相关文章

  1. 类型：Jquery；问题：jquery调用后台带参数方法；结果：利用JQuery的$.ajax()可以很方便的调用asp.net的后台方法。

    利用JQuery的$.ajax()可以很方便的调用asp.net的后台方法. [WebMethod]   命名空间 1.无参数的方法调用, 注意:1.方法一定要静态方法,而且要有[WebMethod] ...

  2. js中ajax连接服务器open函数的另外两个默认参数get请求和默认异步（open的post方式send函数带参数）（post请求和get请求区别：get：快、简单 post：安全，量大，不缓存）（服务器同步和异步区别：同步：等待服务器响应当中浏览器不能做别的事情）（ajax和jquery一起用的）

    js中ajax连接服务器open函数的另外两个默认参数get请求和默认异步(open的post方式send函数带参数)(post请求和get请求区别:get:快.简单 post:安全,量大,不缓存)( ...

  3. 【笔记】Asp.Net WebApi对js POST带参数跨域请求的支持方案

    先说下需求:在原来的WebApi项目中增加对js跨域的请求支持,请求方式:以POST为主,webapi路由规则根据原项目需求修改如下: public static void Register(Http ...

  4. jquery带参插件函数的编写

    <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8" ...

  5. ajaxFileUpload带参数提交(亲测可用)

    使用ajaxFileUpload上传文件时,有时需要带参数提交,网上有很多资料说使用data,但其实要使用data带参数是需要修改的,否则后台是获取不到的. 分析原因: ajaxFileUpload为 ...

  6. js上传文件带参数，并且，返回给前台文件路径，解析上传的xml文件，存储到数据库中

    ajaxfileupload.js jQuery.extend({ createUploadIframe: function(id, uri) { //create frame var frameId ...

  7. ASP.NET Boilerplate 学习 AspNet Core2 浏览器缓存使用 c#基础，单线程，跨线程访问和线程带参数 wpf 禁用启用webbroswer右键菜单 EF Core 2.0使用MsSql/MySql实现DB First和Code First ASP.NET Core部署到Windows IIS QRCode.js：使用 JavaScript 生成

    ASP.NET Boilerplate 学习   1.在http://www.aspnetboilerplate.com/Templates 网站下载ABP模版 2.解压后打开解决方案,解决方案目录: ...

  8. 使用jQuery开发tab选项卡插件

    为了复习巩固jQuery的插件开发.HTML和CSS方面的知识,做了一个简单的tab选项卡插件,简单记录一下开发.使用的过程,以备日后使用. 一.插件效果 tab选项卡插件常用的功能均已实现,包括:动 ...

  9. C#的泛型的类型参数可以有带参数的构造函数的约束方式吗？

    Review后看到标题让我十分羞愧自己语文功底太差,估计...请见谅......我还特地把这句写回开头了...... 问题 前天遇到的一个问题,所以在MSDN发了个问,刚也丰富了下问题,关于泛型的. ...

随机推荐

  1. 跟我学算法-xgboost(集成算法)基本原理推导

    1.构造损失函数的目标函数 2.对目标函数进行泰勒展开 3.把样本遍历转换成叶子节点遍历,合并正则化惩罚项 4.求wj进行求导,使得当目标函数等于0时的wj的值 5.将求解得到的wj反导入方程中,解得 ...

  2. linux rz sz 的安装

    先wget获取包wget http://freeware.sgi.com/source/rzsz/rzsz-3.48.tar.gz然后解压tar zxvf  rzsz-3.48.tar.gz进入目录c ...

  3. jboss & eclipse 集成

    * 前提:       * 安装了 eclipse-jee-3.5.1       * 解压了 jboss5.1       * * "jboss tools" - "J ...

  4. 迷你MVVM框架 avalonjs 1.3.3发布

    大家可以在仓库中看到,多出了一个叫avalon.observe的东西,它是基于Object.observe,dataset, Promise等新API实现.其中,它也使用全新的静态收集依赖的机制,这个 ...

  5. Android开发之通过包管理器获取安装应用信息

    最近在自己写一个APP,有一个模块需要获取手机应用的一些信息.坑还是有,但都基本踩过了,自己把他实现了出来,实现方法还是很需要掌握的.底部弹出的对话框中四个选项的实现不多做说明,主要讲讲如何获取这些安 ...

  6. 44. Wildcard Matching (String; DP, Back-Track)

    Implement wildcard pattern matching with support for '?' and '*'. '?' Matches any single character. ...

  7. 11. Container With Most Water 装水最多的容器

    ［抄题］: Given n non-negative integers a1, a2, ..., an, where each represents a point at coordinate (i, ...

  8. jQuery validator 增加多个模板

    今天学了jquery validator 可以增加多个模板,而不用写长长的js代码.废话少说,直接上例子 这段是要添加的模板 上面是把模板部分是要重复增加多个的部分,需独立出来,用textarea标签 ...

  9. C语言基础课First作业

    一.大学和高中最大的不同是没有人天天看着你,也不会担心上课的时候班主任在后门偷偷瞄着我们,通过阅读邹欣老师的博客后,心目中理想的师生关系就是Coach/Trainee(健身教练/健身学员)的关系,想到 ...

  10. About Game Controllers

    [About Game Controllers] Game Controller(GC),框架从iOS 7和OS X v10.9开始加入,用于便捷使用控制器(手柄). Once discovered, ...