页面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;
}

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