滑动门

 

jsp页面
<TD style="BORDER-BOTTOM: #d0d0d0 1px solid; BORDER-LEFT: #d0d0d0 1px solid; BORDER-

TOP: #d0d0d0 1px solid; BORDER-RIGHT: #d0d0d0 1px solid" height=220><!----------------

---------------------------->
<DIV class=tabberlive>
<TABLE style="BACKGROUND: url(/images1/index_175.jpg) repeat-x 50% top" border=0

cellSpacing=0 cellPadding=0 width="100%">
<TBODY>
<TR>
<TD>
<UL style="PADDING-BOTTOM: 0px; MARGIN-TOP: 0px; PADDING-LEFT: 0px; MARGIN-BOTTOM: 0px;

MARGIN-LEFT: 0px; PADDING-TOP: 0px">
<TABLE border=0 cellSpacing=0 cellPadding=0 width="100%">
<TBODY>
<TR>
<TD style="BORDER-RIGHT: #d3d3d3 1px solid" height=27 width=10>&nbsp;</TD>
<TD style="BORDER-RIGHT: #d3d3d3 1px solid" vAlign=center width=87 align=middle>
<DIV class=gzcyon tabIndex=1 activeclass="gzcyon" unactiveclass="gzcyoff"><SPAN

onclick="window.open('viewCmsCac.do?cacId=')">文化天地</SPAN></DIV></TD>
<TD style="BORDER-RIGHT: #d3d3d3 1px solid" vAlign=center width=87 align=middle>
<DIV class=gzcyoff tabIndex=2 activeclass="gzcyon" unactiveclass="gzcyoff"><SPAN

onclick="window.open('viewCmsCac.do?cacId=')">农信学堂</SPAN></DIV></TD>
<TD vAlign=center align=right><IMG border=0

src="/images1/index_178.jpg"></TD></TR></TBODY></TABLE></UL></TD></TR>
<TR>
<TD height=191>
<DIV class=tabbertab tabIndex=1>
<TABLE border=0 cellSpacing=0 cellPadding=0 width="100%" align=center>
<TBODY>
<TR>
<TD>【★ id="ff808081314c0d2e01314c118def0064_21"】</TD></TR></TBODY></TABLE></DIV>
<DIV class="tabbertab tabbertabhide" tabIndex=2>
<TABLE border=0 cellSpacing=0 cellPadding=0 width="100%" align=center>
<TBODY>
<TR>
<TD>【★ id="ff808081314c0d2e01314c118def0064_22"】

</TD></TR></TBODY></TABLE></DIV></TD></TR></TBODY></TABLE></DIV><!--------------------

------------------------></TD>

//tabber.css样式  <link href="css/tabber/tabber.css" rel="stylesheet" type="text/css"

/>

.tabberlive .tabbertab {
 display:block;
 overflow:visible;
 overflow:hidden;
}
.tabberlive .tabbertabhide {
 display:none;
}

.dhon{
 background-image:url(../../images2/index_08.jpg); width:83px; height:29px;
}
.dhon a{
 font-size:12px; color:#000000; font-weight:bold;
}
.dhoff{}
.dhoff a{
 font-size:12px; color: #A2271F; font-weight:bold;
}

.gzcyon{ width:87px; height:27px; line-height:27px; background:url

(/images1/nxs_012.jpg) center center no-repeat; cursor:pointer; color:#C72A25; font-

size:13px; font-weight:bold;}
.gzcyoff{ width:87px; height:27px; line-height:27px; background:none; color:#000000;

font-size:13px; font-weight:bold;}

// tabber.js样式
<script language="JavaScript" type="text/javascript"

src="js/tabber/tabber.js"></script>
$(document).ready(
  function(){
  initTab();
  }
);
function initTab(){
     var tabbernav=$('div',$('ul',$('div[class="tabberlive"]')));
  //alert(tabbernav.size());
    
  $.each(tabbernav,function(i,j){
    $(j).mouseover(
      function switchTab(){
     //先移除所有的active样式，并置为unactive
     removeOtherClass($(this).parents('ul'));
     //将当前unactive移除
     var unactiveclass=$(this).attr('unactiveclass');
           $(this).removeClass(unactiveclass);
     //将当前置为active
     var activeclass=$(this).attr('activeclass');
           $(this).addClass(activeclass);
     //切换下面的div内容区域
     switchBody($(this).parents('.tabberlive'),$(this).attr('tabindex'));
         });
  });
  }
function removeOtherClass(pt){
  $.each($('div',pt),function(i,j){
 var activeclass=$(j).attr('activeclass');
 $(j).removeClass(activeclass);
 var unactiveclass=$(j).attr('unactiveclass');
 $(j).addClass(unactiveclass)
  });
}
function switchBody(pt,index){
  $.each($('div',pt),function(i,j){
 var tabindex=$(j).attr('tabindex');
 var css=$(j).attr('class');
 //alert(css+' '+css.indexOf('tabbertab'));
 if(css.indexOf('tabbertab')!=-1){
  if(tabindex==index){
    $(j).removeClass('tabbertabhide');
    $(j).addClass('tabberactive');
  }
  else{
    $(j).removeClass('tabberactive');
    $(j).addClass('tabbertabhide'); 
  }
 }
  });
}