jquery实现切换tab

最新推荐文章于 2021-08-17 17:14:15 发布
原创最新推荐文章于 2021-08-17 17:14:15 发布 · 100 阅读
0 ·
CC 4.0 BY-SA版权
文章标签：
#jQuery #CSS #JavaScript #JSP #HTML #ViewUI
此HTML页面展示了用于一户式查询的功能，包括输入纳税人识别号、所属期起止等信息，通过JavaScript实现Tab切换功能，加载不同查询内容。
摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >
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[class!='tabspace']").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" onclick="commitThisJsp('nsrsbh1',1);" 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" onclick="commitThisJsp('nsrsbh2',2);" 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;
}