用jquery动态加载TAB请求帮助！

kempinsun 2011-11-05 12:24:51

目前效果：mytest.webidc.info/demo.html

我的目的是想点击相应的选项卡后，让相应的选项卡背景停留到鼠标经过时的白色。
还有默认就打开第一个选项卡。

帮忙给实现一下呗？

demo.html代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>AJAX jQuery 选显卡 www.corange.cn</title>

<link rel="stylesheet" type="text/css" href="demo.css" />

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript" src="script.js"></script>



</head>



<body>



<div id="rounded">

<img src="img/top_bg.gif" alt="top" /><div id="main" class="container">

     <h2>AJAX TAB 选项卡  www.corange.cn</h2>

    

    <ul id="navigation">

    <li><a href="#page1">asp</a></li>

    <li><a href="#page2">php</a></li>

    <li><a href="#page3">html</a></li>

    <li><a href="#page4">js</a></li>

    <li><img id="loading" src="img/ajax_load.gif" alt="loading" /></li>

    </ul>

    

    <div class="clear"></div>

    

    <div id="pageContent">

    page1</div>

    

    </div>

    <div class="clear"></div>

<img src="img/bottom_bg.gif" alt="bottom" /></div>



</body>

</html>

script.js代码



var default_content="";



$(document).ready(function(){

	

	checkURL();

	$('ul li a').click(function (e){



			checkURL(this.hash);



	});

	

	//filling in the default content

	default_content = $('#pageContent').html();

	

	

	setInterval("checkURL()",250);

	

});



var lasturl="";



function checkURL(hash)

{

	if(!hash) hash=window.location.hash;

	

	if(hash != lasturl)

	{

		lasturl=hash;

		

		// FIX - if we've used the history buttons to return to the homepage,

		// fill the pageContent with the default_content

		

		if(hash=="")

		$('#pageContent').html(default_content);

		

		else

		loadPage(hash);

	}

}





function loadPage(url)

{

	url=url.replace('#page','');

	

	$('#loading').css('visibility','visible');

	

	$.ajax({

		type: "POST",

		url: "load_page.php",

		data: 'page='+url,

		dataType: "html",

		success: function(msg){

			

			if(parseInt(msg)!=0)

			{

				$('#pageContent').html(msg);

				$('#loading').css('visibility','hidden');

			}

		}

		

	});



}

demo.css代码



/*



This is a Tutoralzine Demo 

Original tutorial: A simple AJAX website with jQuery

Tutorial URL: http://tutorialzine.com/2009/09/simple-ajax-website-jquery/



You are free to use the following demo code for any purpose you see fit.



*/





/* Page styles */



body,h1,h2,h3,p,td,quote,small,form,input,ul,li,ol,label{

	margin:0px;

	padding:0px;

	font-family:Arial, Helvetica, sans-serif;

}



body{

	margin-top:20px;

	color:#51555C;

	font-size:13px;

	background-color:#123456;

	text-align:center;

}



.clear{

	clear:both;

}



a, a:visited {

	color:#007bc4;

	text-decoration:none;

	outline:none;

}



a:hover{

	text-decoration:underline;

}



#rounded{

	width:800px;

	margin:20px auto;

	text-align:left;

}



.container{

	background-color:#FFFFFF;

	padding:10px 20px 20px 20px;

}



h1{

	font-size:28px;

	font-weight:bold;

	font-family:"Trebuchet MS",Arial, Helvetica, sans-serif;

}



h2{

	font-weight:normal;

	font-size:20px;

	

	color:#999999;

}



ul{

	margin:30px 0px;

}



li{

	list-style:none;

	display:block;

	float:left;

	width:80px;

}



li a,li a:visited{

	padding:5px 10px;

	text-align:center;

	background-color:#000033;

	color:white;

	border-top:1px solid #000033;

	border-left:1px solid #000033;

	border-right:1px solid #000033;

	

	-moz-border-radius:5px;

	-khtml-border-radius: 5px;

	-webkit-border-radius: 5px;

	border-radius:5px;



	display:block;

	margin-right:10px;

}



li a:hover{

	background-color:#ffffff;

	text-decoration:none;

	color:#000033;

	border-top:1px solid #000033;

	border-left:1px solid #000033;

	border-right:1px solid #000033;

}



#pageContent{

	margin-top:-1px;



	border:1px solid #000033;

	padding:10px;

		

	-moz-border-radius: 5px;

	-khtml-border-radius: 5px;

	-webkit-border-radius: 5px;

	border-radius: 5px;

}



#loading{

	visibility:hidden;

}



.demo{

	color:white;

}

谢谢，我刚注册没多少分，能多给就多给。呵呵

...全文

380 7 打赏收藏转发到动态举报

写回复

用AI写文章

7 条回复

切换为时间正序

请发表友善的回复…

发表回复

yjxf8285 2011-11-08

打赏
举报

http://www.liuxiaofan.com/171.LXF

kouyiSC 2011-11-05

打赏
举报

上面是背景色效果

kouyiSC 2011-11-05

打赏
举报

css：
.evenClass{
background-color: #EFFFFE;
}
.mouseMove{
background-color: #5E94C6;
}
js：
$(function(){
$("#dataForm tr:nth-child(odd)").addClass("evenClass");
$("#dataForm tr").mouseover(function() {
$(this).addClass("mouseMove");
}).mouseout(function() {
$(this).removeClass("mouseMove");
})
});

jsp显示的table:
<table width="100%" cellspacing="0" id="dataForm"><tr></tr>

光曰不日 2011-11-05

打赏
举报

几个提示，应该有所帮助：
1 可直接用$('#pageContent').load('url')替换你的$.ajax方法
2 $('#loading').ajaxStart(function(){$(this).show()}).ajaxStop(function(){$(this).hide()})可全局控制等待标示的显示与隐藏
3 setInterval("checkURL()",250);干嘛的？？
4 选中时的背景色实现，可在点击选项卡时添加样式（addClass()）

bustersword 2011-11-05

打赏
举报

我前些日子刚写的....你将就用着吧

bustersword 2011-11-05

打赏
举报



<html xmlns="http://www.w3.org/1999/xhtml">

<head id="Head1" runat="server">

    <title>Common Place Mapping</title>

    <style type="text/css">

      body {

    color: #6C6C6C;

    font: 12px/21px "宋体";

    margin: 0;

}

.main_Jiu_Change {

    border: 1px solid #D9D9D9;

    color: #6C6C6C;

    float: right;

    height: 204px;

    

    width: 710px;

}

	

ul, ol, li, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, input {

    margin: 0;

    padding: 0;

}



.main_Jiu_Change .hd ul li.selected {

    color: #4A7F07;

}



.main_Jiu_Change .hd ul li {

    color: #00000;

    cursor: pointer;

    font: 16px/23px "微软雅黑";

    height: 66px;

    padding-top:5px;

    text-align: center;

    width: 66px;

	list-style: none ;

}



.main_Jiu_Change .hd ul

{

	 overflow:hidden;

	 height:204px;

	

}



.dl_tj {

    width:200px;

    float:left;

    margin-left: -1px;  

}



.main_Jiu_Change .hd {

   background-image:url("biaoqian.gif");

   float:right;

    height: 204px;

    position:relative;

    width: 68px;

}

 .hd1 {

	background-position:0 0;

 }



 .hd2{

 background-position: -117 0 ;



 }



  .hd3 {

	background-position: -237 0 ;

 }

    </style>

</head>

<body>



     <form runat="server" id="form1">

       <div class="main_Jiu_Change" collection="Y">

    <!--切换开始-->

    <div id='chose' class="hd hd1"><!--hd1 hd2 hd3分别代表三个TAB块背景-->

    	<ul id="j-theatre">

            <li clz="hd1"  class="selected">热点<br>推荐</li>

            <li clz="hd2"  class="">AA<br>视角</li>

            <li clz="hd3"  class="">BB<br>课程</li>

        </ul>

    </div>

    <!--切换 end-->

<!--1111111111111111111111111111111111111111111111111111111111111111111111111111-->

<div style="float: right" id="j-theatre-body">

				<div style="display:none"  >

					<dl class="dl_tj">

					<dt>热点推荐</dt>

						<dd></dd>

						</dl>



					<dl class="dl_tj">

					<dt id="tvb_theatre_dt">热点推荐</dt>

					<dd id="tvb_theatre_dd"></dd>

					</dl>



				<dl class="dl_tj borNone">

				<dt>热点推荐</dt>

					<dd>

				</dd>	

				</dl>





</div>

            <!--2222222222222222222222222222222222222222222222222222222222222222-->

			<div style="display: none;" >

					<dl class="dl_tj">

						<dt>AA视角</dt>

						<dd></dd>

						</dl>

      

				<dl class="dl_tj">

				<dt>AA视角</dt>

				<dd></dd>

				</dl>



			<dl class="dl_tj borNone">

			<dt>AA视角</dt>

			<dd></dd>

			</dl>

			</div>

		<!--3333333333333333333333333333333333333333333333333333333333333333333333-->

			<div style="display: none;" >

				<dl class="dl_tj">

				<dt></dt><dd>BB课程</dd>

				</dl>



				<dl class="dl_tj">

				<dt></dt><dd>BB课程</dd>

				</dl>

    

				<dl class="dl_tj borNone">

				<dt></dt>

			    <dd>BB课程</dd>

			    </dl>

			</div>

</div>









    </form>

</body>

    <script type="text/javascript">

       window.onload = function() {  

	   var choseDiv = document.getElementById("chose");

       var lis=document.getElementById('j-theatre').getElementsByTagName('li');

	   var showDiv=document.getElementById('j-theatre-body').getElementsByTagName('div');

       showDiv[0].style.display='block';

	   for(var i=0;i<lis.length;i++)

	   {  

		    var liCur=lis[i];

			var style=liCur.getAttribute('clz');

			lis[i].onmousemove  = function(num,T,li)

			{

				return function()

					{

					    for(var j=0;j<showDiv.length;j++){

						if(j==num)

						{

							showDiv[j].style.display='block';

							lis[j].className='selected';

						}

						else

						{

						    showDiv[j].style.display='none';

							lis[j].className='';

						}

						}

					    var clz='hd '+T.toString();

					    choseDiv.className=clz;	

					} 

			}(i,style,liCur);	

		}

	   }; 



    </script>

    

</html>