怎样实现js改变class功能？
我想使用js实现如下一个功能：有6个链接，其中有第1-5个的样式都是class=w1，第6个是class=w2；当再点击那1-5个中的任意一个链接比如第3个时，此时只有第...
我想使用js实现如下一个功能：
有6个链接，其中有第1-5个的样式都是class=w1，第6个是class=w2；
当再点击那1-5个中的任意一个链接比如第3个时，此时只有第3个的样式为class=w2，其余的均为class=w1.
请教大虾该怎么实现这一功能呢？请不吝赐教，谢谢！ 展开
有6个链接，其中有第1-5个的样式都是class=w1，第6个是class=w2；
当再点击那1-5个中的任意一个链接比如第3个时，此时只有第3个的样式为class=w2，其余的均为class=w1.
请教大虾该怎么实现这一功能呢？请不吝赐教，谢谢！ 展开
展开全部
1、JavaScript允许你更改元素的class或id。当你更改之后，浏览器会自动更新元素的样式。
2、是className，可不是class
注意：JavaScript使用的是className去访问class属性，因为class是一个保留关键字，因为将来JavaScript可能开始支持像Java一样的类。
例子：
<!doctype html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Test</title>
<style type="text/css">
p {
color: #000000; /* black */
}
p.emphasis {
color: #cc0000; /* red */
}
</style>
</head>
<body>
<p id="test">Test</p>
<hr>
<input type="button" value="修改className为emphasis" onclick="document.getElementById('test').className = 'emphasis';"><br>
<input type="button" value="修改className为空" onclick="document.getElementById('test').className = '';"><br>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
给你写了个代码
<style>
.a1{
background:white;
}
.a2{
background:red;
}
</style>
<a id="w1" href="javascript:changeBackColor('w1')" class="a1">w1</a>
<a id="w2" href="javascript:changeBackColor('w2')" class="a1">w2</a>
<a id="w3" href="javascript:changeBackColor('w3')" class="a1">w3</a>
<a id="w4" href="javascript:changeBackColor('w4')" class="a1">w4</a>
<a id="w5" href="javascript:changeBackColor('w5')" class="a1">w5</a>
<script>
function changeBackColor(obj)
{
for(var i=1;i<=5;i++)
{
document.getElementById("w"+i).className="a2";
}
document.getElementById(obj).className="a1";
}
</script>
不一定是最简单的，这是我的方法
<style>
.a1{
background:white;
}
.a2{
background:red;
}
</style>
<a id="w1" href="javascript:changeBackColor('w1')" class="a1">w1</a>
<a id="w2" href="javascript:changeBackColor('w2')" class="a1">w2</a>
<a id="w3" href="javascript:changeBackColor('w3')" class="a1">w3</a>
<a id="w4" href="javascript:changeBackColor('w4')" class="a1">w4</a>
<a id="w5" href="javascript:changeBackColor('w5')" class="a1">w5</a>
<script>
function changeBackColor(obj)
{
for(var i=1;i<=5;i++)
{
document.getElementById("w"+i).className="a2";
}
document.getElementById(obj).className="a1";
}
</script>
不一定是最简单的，这是我的方法
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
用jquery很容易实现,你下个jquery库，然后JS文件里写这样的代码：
$(function(){
$('ul li').click(){
$(this).removeClass('w1');
$(this).addClass('w2');
}
});
大概是这样，我好久没玩儿JQUERY，如果有问题给我短信吧
$(function(){
$('ul li').click(){
$(this).removeClass('w1');
$(this).addClass('w2');
}
});
大概是这样，我好久没玩儿JQUERY，如果有问题给我短信吧
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<div id="alist">
<a class="w1" onclick="change(this)">1</a>
<a class="w1" onclick="change(this)">2</a>
<a class="w1" onclick="change(this)">3</a>
<a class="w1" onclick="change(this)">4</a>
<a class="w1" onclick="change(this)">5</a>
<a class="w2" onclick="change(this)">6</a>
</div>
<script type="text/javascript">
function change(obj){
var alist=document.getElementById("alist").getElementsByTagName("a");
for(var i=0;i<alist.length;i++)
{
alist[i].className="w1";
}
obj.className="w2";
//如果第六个不变应为： alist[5].className="w2";
}
</script>
<a class="w1" onclick="change(this)">1</a>
<a class="w1" onclick="change(this)">2</a>
<a class="w1" onclick="change(this)">3</a>
<a class="w1" onclick="change(this)">4</a>
<a class="w1" onclick="change(this)">5</a>
<a class="w2" onclick="change(this)">6</a>
</div>
<script type="text/javascript">
function change(obj){
var alist=document.getElementById("alist").getElementsByTagName("a");
for(var i=0;i<alist.length;i++)
{
alist[i].className="w1";
}
obj.className="w2";
//如果第六个不变应为： alist[5].className="w2";
}
</script>
已赞过
已踩过<
你对这个回答的评价是？
更多回答（2）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
