页面javascript学习01-滑动门01

这两天根据网上收集的更改了个滑动门，代码如下：header.js， headTabBar.css, nvTabpage.jsp；nvTabpage.jsp是个网页头，希望能像tabpage一样，下面根据所点的进行显示需要的内容。可是一直图片不能跟着改变，下面修改了红色的代码之后，问题解决，保存下来收藏。^_^!!! param1是外面jsp 用include 调用的参数。

<jsp:include page="nvTabpage.jsp" flush="true">
 <jsp:param name="param1" value="Tab3"/>
</jsp:include>

nvTabpage.jsp
 ----------------------------------------------------------------------------------------------------------------
<script language="javascript">

 var _tabpage = "<%=request.getParameter("param1")%>";

 function document.onreadystatechange(){
 if (document.readyState=="complete") {
 //你要做的操作
   SwitchTab("TabPage1",_tabpage);
 }
 }
 
</script>

<div id="Whatever">
 <ul class="TabBarLevel1" id="TabPage1">
  <li id="Tab1" class="Selected"> <a href="sysRegister.jsp" >系统注册</a></li>
  <li id="Tab2"> <a href="sysModManager.jsp" >其他信息</a></li>
  <li id="Tab3"> <a href="sysUserManager.jsp" >出价记录</a></li>
  <li id="Tab4"><a href="#" >留言簿</a></li>
 </ul>
 <div class="HackBox"><br><br>XXXXXXXX<br></div>
</div>

header.js 

<!-- 显示1级tabBar：鼠标按下显示 -->
function SwitchTab(tabpage,tabid){ 
 if( GetObj(tabid)!=null){
  var oItem = document.getElementById(tabpage);
  
  for(var i=0;i<oItem.children.length;i++){
   var x = oItem.children(i); 
   x.className = "";
   var y = x.getElementsByTagName('a');
   y[0].style.color="#333333";
  } 
  document.getElementById(tabid).className = "Selected";
 }else{window.alert('aaa');}
}

----------------------------------------------------------------------------------------------------------------

headTabBar.css

ul.TabBarLevel1{
 list-style:none;
 margin:0;
 padding-left:10px;
 height:29px;
 background-image:url(../../images/header/tabbar_level1_bk.gif); 
}
ul.TabBarLevel1 li{
 float:left;
 padding:0;
 height:29px;
 margin-right:1px;
 background:url(../../images/header/tabbar_level1_slice_left_bk.gif) left top no-repeat;
}
ul.TabBarLevel1 li a{
 display:block;
 line-height:29px;
 padding:0 20px;
 color:#333;
 background:url(../../images/header/tabbar_level1_slice_right_bk.gif) right top no-repeat;
 white-space: nowrap;
}
ul.TabBarLevel1 li.Selected{
 background:url(../../images/header/tabbar_level1_slice_selected_left_bk.gif) left top no-repeat;
}
ul.TabBarLevel1 li.Selected a{
 background:url(../../images/header/tabbar_level1_slice_selected_right_bk.gif) right top no-repeat;
}

ul.TabBarLevel1 li a:link,ul.TabBarLevel1 li a:visited{
 color:#333;
}
ul.TabBarLevel1 li a:hover,ul.TabBarLevel1 li a:active{
 color:#F30;
 text-decoration:none;
}
ul.TabBarLevel1 li.Selected a:link,ul.TabBarLevel1 li.Selected a:visited{
 color:#000;
}
ul.TabBarLevel1 li.Selected a:hover,ul.TabBarLevel1 li.Selected a:active{
 color:#F30;
 text-decoration:none;
}
div.HackBox {
  padding : 2px 2px ;
  border-left: 2px solid #6697CD;
  border-right: 2px solid #6697CD;
  border-bottom: 2px solid #6697CD;
}

----------------------------------------------------------------------------------------------------------------