jquery实现切换tab
html页面<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=GBK"> <script type="text/javascript" src="jquery.min.js"></script> <link href="tabs.css" rel="stylesheet" type="text/css"> <script type="text/javascript"> //var flag = '1'; var tempURL = '/ReportServer?reportlet=yhs/djnsrxx.cpt&_=1288599668468&nsrsbh='; var startTime = ''; var endTime = ''; /* *add by jinyongliang *2010-11-03 */ function TabSwitch(ele){ // alert(ele.innerHTML); var selectedTab=ele.id; switch(selectedTab) { case "tab1": alert("tab1"); break; } //1、找ID为divTab的元素；2、找className为tabs的所有LI元素（排除className为tabspace的LI元素）；3、清除所有class jQuery("#divTab .tabs LI").removeClass(); //为当前选中的tab设置class jQuery("#"+ele.id).addClass("selectedTab"); //取得当前选中tab里的文本内容 var tabText = jQuery("#"+selectedTab).text(); //当tab改变时，相应的内容也跟着改变 jQuery("#tabContent").empty(); jQuery("#tabContent").append(tabText); } /** * * add by liyang * 2010-11-02 **/ function temp(id) { tempURL = id;} function commitThisJsp(obj,flag){if(document.getElementById(obj).value==''){alert('请输入纳税人识别号！');return ;}var url = '';if(flag==1){url = tempURL+document.getElementById(obj).value;}else{if(document.getElementById("startTime").value == ''){alert('请输入所属期起！');return ;}if(document.getElementById("endTime").value==''){alert('请输入所属期止！');return ;}url = tempURL+document.getElementById(obj).value+'&startTime='+document.getElementById("startTime").value+'&endTime='+document.getElementById("endTime").value;}document.getElementById('temp').src = url;}/** *隐藏DIV或者显示DIV **/function openDIV(obj){if(obj){document.getElementById('timeDIV1').style.display="none";//显示document.getElementById('timeDIV2').style.display="";//显示}else{document.getElementById('timeDIV1').style.display="";//显示document.getElementById('timeDIV2').style.display="none";//显示}} </script> <title>一户式查询</title> </head><BODY leftMargin="0" topMargin="0"marginheight="0" marginwidth="0" ><form name="form1" method="post" action="" ><table width="100%" height="101%" border="0" cellpadding="0" cellspacing="0"> <tr> <td height="100%" align="center" valign="top" bgcolor="ECF6FC"> <table width="95%" height="24" border="0" align="center" cellpadding="0" cellspacing="0" > <tr align="left"> <td align="left" class="ck-td-left">一户式查询</td> </tr></table><table width="95%" border="0" cellpadding="1" cellspacing="1" class="ck-tb-bg" ><tr> <td align="left" class="ck-td-left"><div id="timeDIV1" >纳税人识别号：<input type="text" name="nsrsbh1"value=""><input type="button" name="bName" id="b.jsp"value="检&nbsp;&nbsp;索"></div><div id="timeDIV2" style="display:none;">纳税人识别号：<input type="text" name="nsrsbh2"value="">所&nbsp;属&nbsp;期&nbsp;起&nbsp;：<input type="text" name="startTime"value="">所&nbsp;属&nbsp;期&nbsp;止&nbsp;：<input type="text" name="endTime"value=""><input type="button" name="bName" id="b.jsp"value="检&nbsp;&nbsp;索"></div></td></tr><tr><td> <div id="divTab" style="width:800px;"> <table cellSpacing="0" cellPadding="0" width="100%" border="0"> <tr> <td valign="bottom" align="left" width="100%"> <UL class="tabs"> <LI class="tabspace"></LI> <LI id="tab1" onmousemove="TabSwitch(this)" class="selectedTab">纳税申报</LI> <LI class="tabspace"></LI> <LI id="tab2" onmousemove="TabSwitch(this)">征收入库</LI> <LI class="tabspace"></LI> <LI id="tab3" onmousemove="TabSwitch(this)">认定信息</LI> <LI class="tabspace"></LI> <LI id="tab4" onmousemove="TabSwitch(this)">税种核定</LI> <LI class="tabspace"></LI> <LI id="tab5" onmousemove="TabSwitch(this)">票种核定</LI> <LI class="tabspace"></LI> <LI id="tab6" onmousemove="TabSwitch(this)">发票销售</LI> <LI class="tabspace"></LI> <LI id="tab7" onmousemove="TabSwitch(this)">异常信息</LI> </UL> </td> </tr> </table> </div></td></tr><tr> <td id="tabContent" height="400" align="center"> 卡品资源管理 </td></tr></table></td></tr></table></form></BODY></html>css代码UL{PADDING:0px; MARGIN:0px; LIST-STYLE-TYPE:none}LI{PADDING:0px; MARGIN:0px}#divTab .tabs {WIDTH: auto; HEIGHT: 25px;BORDER-BOTTOM: #1C90E1 1px solid; }#divTab .tabs LI {FLOAT: left;BORDER: #A5C7F5 1px solid; PADDING-LEFT: 10px;PADDING-RIGHT: 10px; PADDING-TOP: 0px;PADDING-BOTTOM: 0px;LINE-HEIGHT: 24px;BACKGROUND: #B8D0F3; CURSOR: pointer; color: blue;}#divTab .tabs .selectedTab {BORDER-LEFT: #5A9CCA 1px solid;BORDER-TOP: #5A9CCA 1px solid;BORDER-RIGHT: #5A9CCA 1px solid; BORDER-BOTTOM: #1C90E1 1px solid;FONT-WEIGHT: bold; BACKGROUND: #F1F7FD; COLOR: #000000;HEIGHT: 25px}#divTab .tabs .tabspace {BORDER-WIDTH: 0px; PADDING: 0px; BACKGROUND: #FFFFFF; WIDTH: 0px;HEIGHT: 22px;}#divTab UL LI {FONT-SIZE: 13px}#tabContent{BORDER-LEFT: #1C90E1 2px solid;BORDER-TOP: #1C90E1 5px solid;BORDER-RIGHT: #1C90E1 2px solid;BORDER-BOTTOM: #1C90E1 5px solid;}
页:
[1]