问题描述
目前效果：mytest.webidc.info/demo.html我的目的是想点击相应的选项卡后，让相应的选项卡背景停留到鼠标经过时的白色。还有默认就打开第一个选项卡。帮忙给实现一下呗？demo.html代码<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>AJAXjQuery选显卡www.corange.cn</title><linkrel="stylesheet"type="text/css"href="demo.css"/><scripttype="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script><scripttype="text/javascript"src="script.js"></script></head><body><divid="rounded"><imgsrc="img/top_bg.gif"alt="top"/><divid="main"class="container"><h2>AJAXTAB选项卡www.corange.cn</h2><ulid="navigation"><li><ahref="#page1">asp</a></li><li><ahref="#page2">php</a></li><li><ahref="#page3">html</a></li><li><ahref="#page4">js</a></li><li><imgid="loading"src="img/ajax_load.gif"alt="loading"/></li></ul><divclass="clear"></div><divid="pageContent">page1</div></div><divclass="clear"></div><imgsrc="img/bottom_bg.gif"alt="bottom"/></div></body></html>
script.js代码vardefault_content="";$(document).ready(function(){checkURL();$('ullia').click(function(e){checkURL(this.hash);});//fillinginthedefaultcontentdefault_content=$('#pageContent').html();setInterval("checkURL()",250);});varlasturl="";functioncheckURL(hash){if(!hash)hash=window.location.hash;if(hash!=lasturl){lasturl=hash;//FIX-ifwe'veusedthehistorybuttonstoreturntothehomepage,//fillthepageContentwiththedefault_contentif(hash=="")$('#pageContent').html(default_content);elseloadPage(hash);}}functionloadPage(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代码/*ThisisaTutoralzineDemoOriginaltutorial:AsimpleAJAXwebsitewithjQueryTutorialURL:http://tutorialzine.com/2009/09/simple-ajax-website-jquery/Youarefreetousethefollowingdemocodeforanypurposeyouseefit.*//*Pagestyles*/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:20pxauto;text-align:left;}.container{background-color:#FFFFFF;padding:10px20px20px20px;}h1{font-size:28px;font-weight:bold;font-family:"TrebuchetMS",Arial,Helvetica,sans-serif;}h2{font-weight:normal;font-size:20px;color:#999999;}ul{margin:30px0px;}li{list-style:none;display:block;float:left;width:80px;}lia,lia:visited{padding:5px10px;text-align:center;background-color:#000033;color:white;border-top:1pxsolid#000033;border-left:1pxsolid#000033;border-right:1pxsolid#000033;-moz-border-radius:5px;-khtml-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;display:block;margin-right:10px;}lia:hover{background-color:#ffffff;text-decoration:none;color:#000033;border-top:1pxsolid#000033;border-left:1pxsolid#000033;border-right:1pxsolid#000033;}#pageContent{margin-top:-1px;border:1pxsolid#000033;padding:10px;-moz-border-radius:5px;-khtml-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;}#loading{visibility:hidden;}.demo{color:white;}
谢谢，我刚注册没多少分，能多给就多给。呵呵
解决方案
本帖最后由 kempinsun 于 2011-11-05 00:29:51 编辑
解决方案二：
几个提示，应该有所帮助：1可直接用$('#pageContent').load('url')替换你的$.ajax方法2$('#loading').ajaxStart(function(){$(this).show()}).ajaxStop(function(){$(this).hide()})可全局控制等待标示的显示与隐藏3setInterval("checkURL()",250);干嘛的？？4选中时的背景色实现，可在点击选项卡时添加样式（addClass()）
解决方案三：
css：.evenClass{background-color:#EFFFFE;}.mouseMove{background-color:#5E94C6;}js：$(function(){$("#dataFormtr:nth-child(odd)").addClass("evenClass");$("#dataFormtr").mouseover(function(){$(this).addClass("mouseMove");}).mouseout(function(){$(this).removeClass("mouseMove");})});jsp显示的table:<tablewidth="100%"cellspacing="0"id="dataForm"><tr></tr>
解决方案四：
上面是背景色效果
解决方案五：
<htmlxmlns="http://www.w3.org/1999/xhtml"><headid="Head1"runat="server"><title>CommonPlaceMapping</title><styletype="text/css">body{color:#6C6C6C;font:12px/21px"宋体";margin:0;}.main_Jiu_Change{border:1pxsolid#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.hdulli.selected{color:#4A7F07;}.main_Jiu_Change.hdulli{color:#00000;cursor:pointer;font:16px/23px"微软雅黑";height:66px;padding-top:5px;text-align:center;width:66px;list-style:none;}.main_Jiu_Change.hdul{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:00;}.hd2{background-position:-1170;}.hd3{background-position:-2370;}</style></head><body><formrunat="server"id="form1"><divclass="main_Jiu_Change"collection="Y"><!--切换开始--><divid='chose'class="hdhd1"><!--hd1hd2hd3分别代表三个TAB块背景--><ulid="j-theatre"><liclz="hd1"class="selected">热点<br>推荐</li><liclz="hd2"class="">AA<br>视角</li><liclz="hd3"class="">BB<br>课程</li></ul></div><!--切换end--><!--1111111111111111111111111111111111111111111111111111111111111111111111111111--><divstyle="float:right"id="j-theatre-body"><divstyle="display:none"><dlclass="dl_tj"><dt>热点推荐</dt><dd></dd></dl><dlclass="dl_tj"><dtid="tvb_theatre_dt">热点推荐</dt><ddid="tvb_theatre_dd"></dd></dl><dlclass="dl_tjborNone"><dt>热点推荐</dt><dd></dd></dl></div><!--2222222222222222222222222222222222222222222222222222222222222222--><divstyle="display:none;"><dlclass="dl_tj"><dt>AA视角</dt><dd></dd></dl><dlclass="dl_tj"><dt>AA视角</dt><dd></dd></dl><dlclass="dl_tjborNone"><dt>AA视角</dt><dd></dd></dl></div><!--3333333333333333333333333333333333333333333333333333333333333333333333--><divstyle="display:none;"><dlclass="dl_tj"><dt></dt><dd>BB课程</dd></dl><dlclass="dl_tj"><dt></dt><dd>BB课程</dd></dl><dlclass="dl_tjborNone"><dt></dt><dd>BB课程</dd></dl></div></div></form></body><scripttype="text/javascript">window.onload=function(){varchoseDiv=document.getElementById("chose");varlis=document.getElementById('j-theatre').getElementsByTagName('li');varshowDiv=document.getElementById('j-theatre-body').getElementsByTagName('div');showDiv[0].style.display='block';for(vari=0;i<lis.length;i++){varliCur=lis[i];varstyle=liCur.getAttribute('clz');lis[i].onmousemove=function(num,T,li){returnfunction(){for(varj=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='';}}varclz='hd'+T.toString();choseDiv.className=clz;}}(i,style,liCur);}};</script></html>
解决方案六：
我前些日子刚写的....你将就用着吧
解决方案七：
该回复于2011-11-08 11:04:50被版主删除
解决方案八：
http://www.liuxiaofan.com/171.LXF