带参数选项卡：
<!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
原文地址：https://www.cnblogs.com/huanghuali/p/10026519.html