JS统制a标签样式
日期：2014-05-16 浏览次数：20486 次
JS控制a标签样式
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>test</title>
<style type="text/css">
.m{color:Red;}
.n{color:blue;}
.g{color:#0F0;}
.y{color:#FC3;}
</style>
<script type="text/javascript">
function change(whichLink) {
var box = document.getElementById("box");
var links = box.getElementsByTagName("a");
for (var i = 0; i < links.length; i++) {
links[i].setAttribute("class", "m");
whichLink.setAttribute("class", "n");
}
}
function cg(whichLink) {
var box = document.getElementById("b");
var links = box.getElementsByTagName("a");
for (var i = 0; i < links.length; i++) {
links[i].setAttribute("class", "g");
whichLink.setAttribute("class", "y");
}
}
</script>
</head>
<body>
<ul id="box">
<li>
<a href="#" class="m" onclick="change(this);">1</a>
<ul id="b">
<li>
<a href="#" class="g" onclick="cg(this);">4</a>
<a href="#" class="g" onclick="cg(this);">5</a>
</li>
</ul>
</li>
<li>
<a href="#" class="m" onclick="change(this);">2</a>
<ul id="b">
<li>
<a href="#" class="g" onclick="cg(this);">4</a>
<a href="#" class="g" onclick="cg(this);">5</a>
</li>
</ul>
</li>
<li>
<a href="#" class="m" onclick="change(this);">3</a>
<ul id="b">
<li>
<a href="#" class="g" onclick="cg(this);">4</a>
<a href="#" class="g" onclick="cg(this);">5</a>
</li>
</ul>
</li>
</ul>
</body>
</html>
我有两个ul，里面的li包含着多个a标签，我想实现的功能是，当我点击第一个ul下面的a标签时，该a的class变成n，其他大的ul下面的a的class变成m，小的ul里面的a标签不会变化。我这样子写，当我点击大的ul下面的a标签时，小ul里面的a标签也会变化。清帮我改一下上面的代码。
------解决方案--------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>test</title>
<style type="text/css">
.m{color:Red;}
.n{color:blue;}
.g{color:#0F0;}
.y{color:#FC3;}
</style>
<script type="text/javascript">
function change(whichLink) {
var box = document.getElementById("box");
var links = box.getElementsByTagName("a");
for (var i = 0; i < links.length; i++) {
links[i].setAttribute("class", "m");
whichLink.setAttribute("class", "n");
}
}
function cg(whichLink) {
var box = document.getElementById("b");
var links = box.getElementsByTagName("a");
for (var i = 0; i < links.length; i++) {
links[i].setAttribute("class", "g");
whichLink.setAttribute("class", "y");
}
}
</script>
</head>
<body>
<ul id="box">
<li>
<a href="#" class="m" onclick="change(this);">1</a>
<ul id="b">
<li>
<a href="#" class="g" onclick="cg(this);">4</a>
<a href="#" class="g" onclick="cg(this);">5</a>
</li>
</ul>
</li>
<li>
<a href="#" class="m" onclick="change(this);">2</a>
<ul id="b">
<li>
<a href="#" class="g" onclick="cg(this);">4</a>
<a href="#" class="g" onclick="cg(this);">5</a>
</li>
</ul>
</li>
<li>
<a href="#" class="m" onclick="change(this);">3</a>
<ul id="b">
<li>
<a href="#" class="g" onclick="cg(this);">4</a>
<a href="#" class="g" onclick="cg(this);">5</a>
</li>
</ul>
</li>
</ul>
</body>
</html>
我有两个ul，里面的li包含着多个a标签，我想实现的功能是，当我点击第一个ul下面的a标签时，该a的class变成n，其他大的ul下面的a的class变成m，小的ul里面的a标签不会变化。我这样子写，当我点击大的ul下面的a标签时，小ul里面的a标签也会变化。清帮我改一下上面的代码。
------解决方案--------------------
- HTML code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>test</title>
<style type="text/css">
.m{color:Red;}
.n{color:blue;}
.g{color:#0F0;}
.y{color:#FC3;}
</style>
<script type="text/javascript">
function change(whichLink) {
var box = document.get
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
