带参数选项卡：
<!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>
效果图：