ajax实现tab控件

使用jQuery完成的tab控件,兼使用JavaScript实现的滚动页面,需要用到 jquery-tabs.jsjquery-1.1.3.1.js包,页面调用如下:

<html>
    <head>
   <title>Tabs - jQuery</title>

<script src="jquery-1.1.3.1.js" type="text/javascript"></script>
<script src="jquery-tabs.js" type="text/javascript"></script>
<script type="text/javascript">
	$(function() {
		$('#container-1').tabs();
	});
 </script> 
<style type="text/css" >
	.tabs-hide {
			display: none;
	}    
</style>
</head>
    <body>
      <h2>Simple Tabs</h2>
       <div id="container-1">
            <ul>
                <li><a href="#fragment-1"><span>One</span></a></li>
                <li><a href="#fragment-2"><span>Two</span></a></li>
                <li><a href="#fragment-3"><span>Tabs are flexible again
				</span></a></li>
            </ul>
            <div id="fragment-1">
				<div id="marqueebox0" style="overflow:hidden;height:111px;line-height:22x;">
                <table width="718"  border="0" align="center" cellpadding="0" cellspacing="0">
				 <tr onmouseover="javascript:this.bgColor='#ffffff'"   onmouseout="javascript:this.bgColor=''">
		             <td width="4%">f1</td>
		          </tr>  
				  <tr onmouseover="javascript:this.bgColor='#ffffff'"   onmouseout="javascript:this.bgColor=''">
		             <td width="4%">f2</td>
		          </tr>
				  <tr onmouseover="javascript:this.bgColor='#ffffff'"   onmouseout="javascript:this.bgColor=''">
		             <td width="4%">f3</td>
		          </tr>
				  <tr onmouseover="javascript:this.bgColor='#ffffff'"   onmouseout="javascript:this.bgColor=''">
		             <td width="4%">f4</td>
		          </tr>
				  <tr onmouseover="javascript:this.bgColor='#ffffff'"   onmouseout="javascript:this.bgColor=''">
		             <td width="4%">f5</td>
		          </tr>
				  <tr onmouseover="javascript:this.bgColor='#ffffff'"   onmouseout="javascript:this.bgColor=''">
		             <td width="4%">f6</td>
		          </tr>
				  <tr onmouseover="javascript:this.bgColor='#ffffff'"   onmouseout="javascript:this.bgColor=''">
		             <td width="4%">f1</td>
		          </tr>  
				  <tr onmouseover="javascript:this.bgColor='#ffffff'"   onmouseout="javascript:this.bgColor=''">
		             <td width="4%">f2</td>
		          </tr>
				  <tr onmouseover="javascript:this.bgColor='#ffffff'"   onmouseout="javascript:this.bgColor=''">
		             <td width="4%">f3</td>
		          </tr>
				  <tr onmouseover="javascript:this.bgColor='#ffffff'"   onmouseout="javascript:this.bgColor=''">
		             <td width="4%">f4</td>
		          </tr>
				  <tr onmouseover="javascript:this.bgColor='#ffffff'"   onmouseout="javascript:this.bgColor=''">
		             <td width="4%">f5</td>
		          </tr>
				  <tr onmouseover="javascript:this.bgColor='#ffffff'"   onmouseout="javascript:this.bgColor=''">
		             <td width="4%">f6</td>
		          </tr>
		  		</table>
				</div>
            </div>
            <div id="fragment-2">
                <div id="marqueebox0" style="overflow:hidden;height:111px;line-height:22x;">
				<table width="718"  border="0" align="center" cellpadding="0" cellspacing="0">
				 <tr onmouseover="javascript:this.bgColor='#ffffff'"   onmouseout="javascript:this.bgColor=''">
		             <td width="4%">f7</td>
		          </tr>
				  <tr onmouseover="javascript:this.bgColor='#ffffff'"   onmouseout="javascript:this.bgColor=''">
		             <td width="4%">f8</td>
		          </tr>
				  <tr onmouseover="javascript:this.bgColor='#ffffff'"   onmouseout="javascript:this.bgColor=''">
		             <td width="4%">f9</td>
		          </tr>
				  <tr onmouseover="javascript:this.bgColor='#ffffff'"   onmouseout="javascript:this.bgColor=''">
		             <td width="4%">f10</td>
		          </tr>
				  <tr onmouseover="javascript:this.bgColor='#ffffff'"   onmouseout="javascript:this.bgColor=''">
		             <td width="4%">f11</td>
		          </tr>
				  <tr onmouseover="javascript:this.bgColor='#ffffff'"   onmouseout="javascript:this.bgColor=''">
		             <td width="4%">f12</td>
		          </tr>
				  <tr onmouseover="javascript:this.bgColor='#ffffff'"   onmouseout="javascript:this.bgColor=''">
		             <td width="4%">f9</td>
		          </tr>
				  <tr onmouseover="javascript:this.bgColor='#ffffff'"   onmouseout="javascript:this.bgColor=''">
		             <td width="4%">f10</td>
		          </tr>
				  <tr onmouseover="javascript:this.bgColor='#ffffff'"   onmouseout="javascript:this.bgColor=''">
		             <td width="4%">f11</td>
		          </tr>
		  		</table>
		  		</div>
            </div>
            <div id="fragment-3">
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
            </div>
			<script> 
<!-- 
function startmarquee(lh,speed,delay,index){ 
var t; 
var p=false; 
var o=document.getElementById("marqueebox"+index); 
o.innerHTML+=o.innerHTML; 
o.onmouseover=function(){p=true} 
o.onmouseout=function(){p=false} 
o.scrollTop = 0; 
function start(){ 
t=setInterval(scrolling,speed); 
if(!p) o.scrollTop += 2; 
} 
function scrolling(){ 
if(o.scrollTop%lh!=0){ 
o.scrollTop += 2; 
if(o.scrollTop>=o.scrollHeight/2) o.scrollTop = 0; 
}else{ 
clearInterval(t); 
setTimeout(start,delay); 
} 
} 
setTimeout(start,delay); 
} 
startmarquee(22,50,3000,0); 
/**startmarquee(一次滚动高度,速度,停留时间,图层标记);**/ 

//--> 
</script>
        </div>
    </body>
</html>

你可能感兴趣的:(JavaScript,html,jquery,Ajax)