带参数选项卡：

<!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. MySQL GTID （二）

    MySQL GTID 系列之二 三.在线将GTID转化为传统模式 环境见上篇系列文章 关闭GTID,不用停止服务,不影响线上业务 3.1 关闭GTID复制,调整为传统复制 #SLVAE实例上停止复制 ...

  2. 【转】Unity Scene场景自定义坐标轴

    来自:https://blog.csdn.net/cheng624/article/details/70859054 多看看别人的代码是没有坏处的,即使学不了人家的大框架,偶尔拾起一些小东西也是可以的 ...

  3. LPCTSTR和LPTSTR和char *究竟有什么区别

    LPSTR = char* LPCSTR = const char* LPTSTR: 如果定义了UNICODE宏,那么LPTSTR = wchar_t*否则LPTSTR = char* LPCTSTR ...

  4. 通过@Configuratin配置Bean

    Spring的依赖注入可以基于xml配置,也可以基于注解配置,还可以基于java类配置. 普通的bean类,只要标注了@Configuration注解,就可以为Spring容器提供Bean定义的信息. ...

  5. Python小程序之「读取站点地图 自动为Gitalk创建Issues」

    首发于个人博客 想获得更好的阅读体验,烦请移步⬆️ 前言 前些天给博客加了评论功能,试了Disqus.Valine等一干评论系统,最后还是选择了在大陆相对友好而且符合技术博客风格的Gitalk.但是由 ...

  6. dedecms分页

    mshd_orderlist.php $page = isset($_REQUEST[; $count = $mshd_miaosha_member_obj -> getMemberList(t ...

  7. GPS坐标转换为百度地图坐标

    /** * GPS坐标转换为百度地图坐标 * 需要引入javabase64.jar 和json的一些包 * */ public class Gps2BaiDu { public static void ...

  8. Undo Architecture

    [Undo Architecture] NSUndoManager is a general-purpose recorder of operations for undo and redo. NSU ...

  9. 变分贝叶斯VBEM 由浅入深

    变分贝叶斯EM指的是变分贝叶斯期望最大化(VBEM, variational Bayes expectation maximization),这种算法基于变分推理,通过迭代寻找最小化KL(Kullba ...

  10. Google Tango初学者教程

    Getting Started with the Tango Java API In this tutorial, we'll go through setting up your build env ...