JS。主要是用来在导航上做点击后背景图片停留
日期：2014-05-16 浏览次数：20407 次
求一个JS。主要是用来在导航上做点击后背景图片停留
本人是菜鸟，只能说自己思路，却写不出来。
导航 格局
HTML code
<div id="nav"> <ul> <li><a href="">$$$1</a></li> <li><a href="">##2</a></li> <li><a href="">##3</a></li> <li><a href="">##4</a></li> </ul> </div>
我想要的效果 ：
1.当点击其中 某一个 li 的时候 添加一个 class（假设为：bg2） 上去 。
2. 点击另一个 li 的时候 当前 li 添加 同一个 class （bg2），同时 在之前点击过的 li 上的 class 移除。
3.有一个初始的判断就是初始停留在第一个li上面。
4.定位是在nav下的 li 。
由于我水平有限 虽然很简单但似乎我还真写不出来 所以来求救了
------解决方案--------------------
<style type="text/css">
.test1{
background-color:#FF0000;
}
.test2{
background-color:#FFFF00;
}
</style>
<script type="text/javascript">
function init(){
var a=document.getElementById("test");
var b=document.getElementsByTagName("li");
for(var i=0;i<b.length;i++){
b[i].onclick=change;
if(i==0){
b[i].className="test1";
}else{
b[i].className="test2";
}
}
}
function change(){
var a=document.getElementById("test");
var b=document.getElementsByTagName("li");
for(var i=0;i<b.length;i++){
b[i].className="test2";
}
this.className="test1";
}
window.onload=init;
</script>
</head>
<body>
<div>
<ul style="width:50px;" id="test">
<li>test1</li>
<li>test2</li>
<li>test3</li>
<li>test4</li>
</ul>
</div>
是这个意思吗？
本人是菜鸟，只能说自己思路，却写不出来。
导航 格局
HTML code
<div id="nav"> <ul> <li><a href="">$$$1</a></li> <li><a href="">##2</a></li> <li><a href="">##3</a></li> <li><a href="">##4</a></li> </ul> </div>
我想要的效果 ：
1.当点击其中 某一个 li 的时候 添加一个 class（假设为：bg2） 上去 。
2. 点击另一个 li 的时候 当前 li 添加 同一个 class （bg2），同时 在之前点击过的 li 上的 class 移除。
3.有一个初始的判断就是初始停留在第一个li上面。
4.定位是在nav下的 li 。
由于我水平有限 虽然很简单但似乎我还真写不出来 所以来求救了
------解决方案--------------------
<style type="text/css">
.test1{
background-color:#FF0000;
}
.test2{
background-color:#FFFF00;
}
</style>
<script type="text/javascript">
function init(){
var a=document.getElementById("test");
var b=document.getElementsByTagName("li");
for(var i=0;i<b.length;i++){
b[i].onclick=change;
if(i==0){
b[i].className="test1";
}else{
b[i].className="test2";
}
}
}
function change(){
var a=document.getElementById("test");
var b=document.getElementsByTagName("li");
for(var i=0;i<b.length;i++){
b[i].className="test2";
}
this.className="test1";
}
window.onload=init;
</script>
</head>
<body>
<div>
<ul style="width:50px;" id="test">
<li>test1</li>
<li>test2</li>
<li>test3</li>
<li>test4</li>
</ul>
</div>
是这个意思吗？
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
