100分实现简单功能解决方法
日期：2014-05-16 浏览次数：20389 次
100分实现简单功能
就导航条上这样效果
首页 游旅 机票
当点击游旅后，变成另一郊果（或换成另一张图片，或换成另一种背影），再没有点击其他选项时，还是保持点＂游旅＂后的状态．当然这是头不变，页面在变．就如你就游旅是Ｔravel.aspx,但点机票是Tricket.aspx.用ＪＳ怎么实现？
------解决方案--------------------
css
------解决方案--------------------
css
------解决方案--------------------
可以把每个页面都加上这个头，如果觉得以后改起来麻烦，可以抽出一个公用的
<table border= "1 ">
<tr>
<td style= "background-color:red "> 游旅
</td>
<td onclick=document.location.href= 'Tricket.aspx '> 机票
</td>
</tr>
</table>
机票的页面内容
另一个
<table border= "1 ">
<tr>
<td onclick=document.location.href= 'Travel.aspx '> 游旅
</td>
<td style= "background-color:red "> 机票
</td>
</tr>
</table>
游旅的页面内容
------解决方案--------------------
<style>
#nav li{
float:left;
background-color:#009966;
}
#nav a{
color:#000000;
text-decoration:none;
padding-top:4px;
display:block;
width:97px;
height:22px;
text-align:center;
border-left:1px solid white;
}
</style>
<script>
function showChange(o){
var ul=document.getElementById( "nav ");
for(i=0;i <ul.childNodes.length;i++){
if(ul.childNodes[i]==o.parentNode){
ul.childNodes[i].style.backgroundColor= "blue ";
}else{
ul.childNodes[i].style.backgroundColor= "#009966 ";
}
}
}
</script>
<body>
<ul id= "nav ">
<li> <a href= "# " onclick= "showChange(this) "> 首页 </a> </li>
<li> <a href= "# " onclick= "showChange(this) "> 旅游 </a> </li>
<li> <a href= "# " onclick= "showChange(this) "> 机票 </a> </li>
</ul>
</body>
</html>
我JS不太精，供楼主参考下
------解决方案--------------------
呵呵，好像还有一部分没实现哦，头不变身变，偶不会，看下面的高手了。。。
------解决方案--------------------
既然是多个页面你各加一个头好了，
也许你是想要一个 tabcontrol
随便在网上搜一下用 js 实现很 easy 的。。。
就导航条上这样效果
首页 游旅 机票
当点击游旅后，变成另一郊果（或换成另一张图片，或换成另一种背影），再没有点击其他选项时，还是保持点＂游旅＂后的状态．当然这是头不变，页面在变．就如你就游旅是Ｔravel.aspx,但点机票是Tricket.aspx.用ＪＳ怎么实现？
------解决方案--------------------
css
------解决方案--------------------
css
------解决方案--------------------
可以把每个页面都加上这个头，如果觉得以后改起来麻烦，可以抽出一个公用的
<table border= "1 ">
<tr>
<td style= "background-color:red "> 游旅
</td>
<td onclick=document.location.href= 'Tricket.aspx '> 机票
</td>
</tr>
</table>
机票的页面内容
另一个
<table border= "1 ">
<tr>
<td onclick=document.location.href= 'Travel.aspx '> 游旅
</td>
<td style= "background-color:red "> 机票
</td>
</tr>
</table>
游旅的页面内容
------解决方案--------------------
<style>
#nav li{
float:left;
background-color:#009966;
}
#nav a{
color:#000000;
text-decoration:none;
padding-top:4px;
display:block;
width:97px;
height:22px;
text-align:center;
border-left:1px solid white;
}
</style>
<script>
function showChange(o){
var ul=document.getElementById( "nav ");
for(i=0;i <ul.childNodes.length;i++){
if(ul.childNodes[i]==o.parentNode){
ul.childNodes[i].style.backgroundColor= "blue ";
}else{
ul.childNodes[i].style.backgroundColor= "#009966 ";
}
}
}
</script>
<body>
<ul id= "nav ">
<li> <a href= "# " onclick= "showChange(this) "> 首页 </a> </li>
<li> <a href= "# " onclick= "showChange(this) "> 旅游 </a> </li>
<li> <a href= "# " onclick= "showChange(this) "> 机票 </a> </li>
</ul>
</body>
</html>
我JS不太精，供楼主参考下
------解决方案--------------------
呵呵，好像还有一部分没实现哦，头不变身变，偶不会，看下面的高手了。。。
------解决方案--------------------
既然是多个页面你各加一个头好了，
也许你是想要一个 tabcontrol
随便在网上搜一下用 js 实现很 easy 的。。。
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
