带参数选项卡：

<!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. IE浏览器中不支持cookie问题

    /** * Cookie plugin * * Copyright (c) 2006 Klaus Hartl (stilbuero.de) * Dual licensed under the MIT ...

  2. eclipse cut copy paste plugin

    The Cut Copy Paste Plus plug-in enhances the standard Cut, Copy and Paste commands in Eclipse IDE. W ...

  3. 【332】Machine Learning

    Reference: 决策树方法-对买电脑进行分类预测 Reference: 最邻近规则分类(K-Nearest Neighbor)KNN算法应用 Reference: python 内建函数 str ...

  4. sass compact方法的实现

    不想依赖compass的编译器,但sass的又没有compact方法,于是自己造轮子.最早时在stackoverflow看到一个 @function compact($var-1, $var-2: f ...

  5. 迷你MVVM框架 avalonjs 0.96发布

    本版本主要是性能优化与 fix BUG,改进如下: 处理notifySubscribers中的BUG,它在标准浏览器不会移除那些无用的视图刷新函数.详见这里 重构modelBindling.SELEC ...

  6. ios 7.1企业证书无线安装

    ios升级到7.1时,企业证书http服务器发布无线安装不能使用,需要使用https服务器. 测试了几种方式 1.测试时自签名https证书测试无效,提示不能连接到服务器 2.使用dropbox共享连 ...

  7. c语言寄存器变量

    寄存器存在于CPU内部,运算速度非常快, 因为内存中的数据必须载入寄存器才能计算.如果直接定义一个变量为寄存器变量,则少了载入等过程自然会快.对于频繁使用的变量可以把它放在寄存器中来提速度. 对于VC ...

  8. 20172325《Java程序设计》第一周学习总结

    20172325<Java程序设计>第一周学习总结 教材学习内容总结 第一章 1.1软件质量 软件工程是一门关于高质量软件开发的技术和理论的学科. 高质量软件的特征 1.2 数据结构 软件 ...

  9. MarkDown语法练习笔记

    MarkDown使用规则 标题Markdown 支持两种标题的语法,类 Setext 和类 atx 形式 Setext 形式:用底线的形式 Selext形式采用: 1.最高阶标题(=)2.第二阶标题( ...

  10. 创建圆角 抛出一个错误:二元运算符“|”不能用于两个UIRectCorner操作数

    //        let beizer:UIBezierPath = UIBezierPath(roundedRect: btn5.bounds, byRoundingCorners: UIRect ...