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

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

<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>
            
<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>

<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>

调试易

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

解决方案 »