读书人
栏目▼

如何改 ：跳转到相应页 导航栏文字的背

发布时间： 2012-02-04 15:43:09 作者： rapoo

怎么改 ：跳转到相应页 导航栏文字的背景色就变成蓝色
<html xmlns= "http://www.w3.org/1999/xhtml ">

<head>
<title> </title>

<style type= "text/css ">
body {font-size:12px;font-family:宋体}
ul.TabBarLevel1{
list-style:none;
margin:0;
padding:0;
height:29px;
background-image:url(http://pics.taobao.com/2k5/sys/component/tabbar_level1_bk.gif);
}
ul.TabBarLevel1 li{
float:left;
padding:0;
height:29px;
margin-right:1px;
background:url(http://pics.taobao.com/2k5/sys/component/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(http://pics.taobao.com/2k5/sys/component/tabbar_level1_slice_right_bk.gif) right top no-repeat;
white-space: nowrap;
}
ul.TabBarLevel1 li.Selected{
background:url(http://pics.taobao.com/2k5/sys/component/tabbar_level1_slice_selected_left_bk.gif) left top no-repeat;
}
ul.TabBarLevel1 li.Selected a{
background:url(http://pics.taobao.com/2k5/sys/component/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;
}

</style>

</head>

<body style= "font-family: 宋体 ">


<div id= "Whatever " style= "text-align: center ">
<table border= "0 " cellpadding= "0 " cellspacing= "0 " style= "width: 770px; background-color: #f5f5f5 ">
<tr>
<td colspan= "7 " style= "background-image: url(Images/top.jpg); background-repeat: no-repeat;
height: 114px ">
</td>
</tr>
<tr>
<td colspan= "7 " style= "height: 9px; ">
<ul class= "TabBarLevel1 " id= "TabPage1 ">


<li id= "Tab1 "> <a href= "Index.aspx " onclick= "javascript:switchTab( 'TabPage1 ', 'Tab1 '); "> <span
style= "font-size: 10pt "> 首页 </span> </a> </li>
<li id= "Tab2 "> <a href= "../../Guanyuwomen.aspx " onclick= "javascript:switchTab( 'TabPage1 ', 'Tab2 '); ">
<span style= "font-size: 10pt "> 关于我们 </span> </a> </li>

<li id= "Tab3 "> <a href= "ChanPin2.aspx " onclick= "javascript:switchTab( 'TabPage1 ', 'Tab3 '); "> <span
style= "font-size: 10pt "> 产品展示 </span> </a> </li>
<li id= "Tab4 "> <a href= "XinWen.aspx " onclick= "javascript:switchTab( 'TabPage1 ', 'Tab4 '); "> <span
style= "font-size: 10pt "> 新闻资讯 </span> </a> </li>
<li id= "Tab5 "> <a href= "Fangkeliuyan.aspx " onclick= "javascript:switchTab( 'TabPage1 ', 'Tab5 '); "> <span
style= "font-size: 10pt "> 访客留言 </span> </a> </li>
<li id= "Tab6 "> <a href= "Lianxiwomen.aspx " onclick= "javascript:switchTab( 'TabPage1 ', 'Tab6 '); "> <span
style= "font-size: 10pt; "> 联系我们 </span> </a> </li> </ul>
</td>
</tr>
</table>
<br />
</div>
<script type = "text/javascript " language= "JavaScript ">
//Switch Tab Effect
function switchTab(tabpage,tabid){
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 ";
}

</script>
</body>
</html>

现在在同一页点击会变，但跳转到别的页就不变了

[解决办法]
<html xmlns= "http://www.w3.org/1999/xhtml ">
<head>
<title> </title>
<style type= "text/css ">
body { font-size:12px; font-family:宋体 }

ul.TabBarLevel1 { list-style:none; margin:0; padding:0; height:29px; background-image:url(http://pics.taobao.com/2k5/sys/component/tabbar_level1_bk.gif); }



ul.TabBarLevel1 li { float:left; padding:0; height:29px; margin-right:1px; background:url(http://pics.taobao.com/2k5/sys/component/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(http://pics.taobao.com/2k5/sys/component/tabbar_level1_slice_right_bk.gif) right top no-repeat; white-space: nowrap; }

ul.TabBarLevel1 li.Selected { background:url(http://pics.taobao.com/2k5/sys/component/tabbar_level1_slice_selected_left_bk.gif) left top no-repeat; }

ul.TabBarLevel1 li.Selected a { background:url(http://pics.taobao.com/2k5/sys/component/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; }
</style>
</head>
<body style= "font-family: 宋体 ">
<div id= "Whatever " style= "text-align: center ">
<table border= "0 " cellpadding= "0 " cellspacing= "0 " style= "width: 770px; background-color: #f5f5f5 ">
<tr>
<td colspan= "7 " style= "background-image: url(Images/top.jpg); background-repeat: no-repeat;
height: 114px "> </td>
</tr>
<tr>
<td colspan= "7 " style= "height: 9px; "> <ul class= "TabBarLevel1 " id= "TabPage1 ">
<li id= "Tab1 "> <a href= "Index.aspx " onClick= "javascript:switchTab( 'TabPage1 ', 'Tab1 '); "> <span
style= "font-size: 10pt "> 首页 </span> </a> </li>
<li id= "Tab2 " class= "Selected "> <a href= "../../Guanyuwomen.aspx " onClick= "javascript:switchTab( 'TabPage1 ', 'Tab2 '); "> <span style= "font-size: 10pt "> 关于我们 </span> </a> </li>
<li id= "Tab3 "> <a href= "ChanPin2.aspx " onClick= "javascript:switchTab( 'TabPage1 ', 'Tab3 '); "> <span
style= "font-size: 10pt "> 产品展示 </span> </a> </li>
<li id= "Tab4 "> <a href= "XinWen.aspx " onClick= "javascript:switchTab( 'TabPage1 ', 'Tab4 '); "> <span
style= "font-size: 10pt "> 新闻资讯 </span> </a> </li>
<li id= "Tab5 "> <a href= "Fangkeliuyan.aspx " onClick= "javascript:switchTab( 'TabPage1 ', 'Tab5 '); "> <span
style= "font-size: 10pt "> 访客留言 </span> </a> </li>
<li id= "Tab6 "> <a href= "Lianxiwomen.aspx " onClick= "javascript:switchTab( 'TabPage1 ', 'Tab6 '); "> <span
style= "font-size: 10pt; "> 联系我们 </span> </a> </li>
</ul> </td>
</tr>
</table>
<br />
</div>
<script type = "text/javascript " language= "JavaScript ">
//Switch Tab Effect


function switchTab(tabpage,tabid){
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 ";
}

</script>
</body>
</html>


你到了其它的页面，就要把相应的Li加上Selected的样式。

比如：

<li id= "Tab2 " class= "Selected "> ...... </li>

我给上面的TAB2加了样式，你可以自己看下。

[解决办法]
你要把Style的内容都保存到一个CSS文件里，然后在每个页面中用Link标签来引用。

剩下的内容就只剩十多行的HTML代码了。

那段JS内容，可有可无，只是一个点击的效果，点击完就到其它页面去了，也来不及看。。。

你把Li中的Onclick的属性去掉就好了。

读书人网 >JavaScript

热点推荐

触屏版 | 电脑版

读书人网 m.reader8.net