Question

如何利用JS实现在li中添加或删除class属性

想实现：
默认首页会有class=“center"，当点击新闻/图片后，清除首页的class，添加新闻/图片的class="center"
我的代码如下，但好像不起作用，哪位朋友帮忙分析一下，谢谢！
<ul id="test">
<li onclick="setCurrent(0)"><a href="#">首页</a></li>
<li onclick="setCurrent(1)"><a href="#">新闻</a></li>
<li onclick="setCurrent(2)"><a href="#">图片</a></li>
</ul>

<script type="text/javascript">
function setCurrent(i){
var parentElement = document.getElementById("test").getElementsByTagName("li");
for (var j=0;j<parentElement.children.length;j++){
parentElement.children[j].className = (i==j)?:"center":""; //"center"是class名称
}
}
</script>

Answer 1

可以使用jQuery的attr方法来实现对某一元素的的class的属性的添加或者删除，attr() 方法设置或返回被选元素的属性值.根据该方法不同的参数，其工作方式也有所差异，可以使用removeclass来删除class属性。

工具原料：编辑器、浏览器

1、为li添加class属性：

为某个li元素添加class=“special”的属性

$('li').attr('class','special');

2、删除class属性：

 $("li").removeClass("special");
});

Answer 2

用jquery简单 原js的话循环里面加个判断
if(j==i){
parentElement[j]..className="center";

}
还有你循换里应该没有那个children
如果想要jqurey的话我再给你写 要是程序不要jquery上面的就可以

追问

谢谢回答，是要改成这样吗，我是js菜鸟。
for (var j=0;j<parentElement.children.length;j++){
if(j==i){
parentElement[j].className="center";
}
}

追答

$( function() {
$("#test li").click(function(){

$("#test li").removeClass("center");
$(this).addClass("center");
});

}
用这个吧简单 还不用在标签里写onclick传值了
你程序里有jquery.js就行web项目现在一般的话都用类似用ajax什么的都方便不用原始的了
不会用的话追问我

追问

我是新建了一个js文件，然后在htm文件里边引用的，但好像不起作用，可以直接在htm文件里写你的函数吗。

追答

可以但是前提是要有HTML要导入jquery.js这个例如

你程序没有就下载一个你要是做项目肯定会用到 我给你写个完成页面

首页
新闻
图片

$( function() {
$("#test li").click(function(){

$("#test li").removeClass("center");
$(this).addClass("center");
});

}

Answer 3

function setCurrent(i){
	var pe = document.getElementById("test");
	for (var j = 0; j < pe.children.length; j++) {
		pe.children[j].className = i == j ? : "center" : "";
	}
}

追问

谢谢回答，代码解决不了问题。

Answer 4

<div class="head_nav clearfix">
<ul class="nav">
<li onclick="setCurrent(0)"><a href="#" class="CCC">AAA</a>
<li onclick="setCurrent(1)"><a href="#" class="BBB">BBB</a></li>
<li onclick="setCurrent(2)"><a href="#" class="CCC">CCC</a></li>
</ul>
</div>
<script type="text/javascript">
function setCurrent(i){
var parentElement = document.getElementById("nav");
for (var j=0;j<parentElement.children.length;j++){
parentElement.children[j].className = (i==j)?:"currentStyleName":"otherStyleName";
}
}
</script>
希望对你能有所帮助。

追问

您是Copy过来的吗？