Question

用js给控制li的class的问题

<div class="div1">
<ul>
<li class="home">home</li>
<li class="a">2222222</li>
<li class="a">3333333/li>
<li class="a">4444444</li>
<li class="a">5555555</li>
</ul>
</div>
请看看上面的代码，除了class="home"的li之外，单击选中任何一个li的时候要清除第一个li的class值home, 该怎么做啊？ 大家帮帮忙啊。。。。

Answer 1

你这个是不是要做一个类似导航的东西，个人建议就弄一个 home 的样式 不要弄那个 a 的样式

$(".div1 ul li").removeClass("home");//先去除所有 样式div1 下面ul标签下面li标签的home样式
$(****).addClass("home");//再给选中的li标签加上一个home样式，，$(****)是你选中的li标签的对象

home你弄成选中样式

Answer 2

如果是 jQuery 的话，会比较简单

$("li").on("click", function() {
if(!$(this).hasClass("home")) {
$(".div1 ul li:first").removeClass("home");
}
});

追问

首先感谢你的回复，可惜你的代码没起作用。
我用的是disuzx2.0，只要引用jquery库，diy功能就失效，所以想用js解决。你能帮我吗？

追答

用纯 Javascript 就相对复杂了，下面的代码是根据你提供的 HTML 写的。

window.onload = function() {
function has_class(stack, needle) {
stack = stack.split(" ");
for(var i = 0; i < stack.length; i++) {
if(stack[i] === needle) {
return true;
}
}
return false;
}

function remove_class(stack, needle) {
stack = stack.split(" ");
for(var i = 0; i < stack.length; i++) {
if(stack[i] === needle) {
stack[i] = "";
break;
}
}
return stack.join(" ");
}

var lis = document.getElementsByTagName("LI");
for(var i = 0; i < lis.length; i++) {
lis[i].onclick = function() {
if(!has_class(this.className, "home")) {
var li_home = document.getElementsByClassName("home"),
classes = remove_class(li_home[0].className, "home");
li_home[0].className = classes;
}
};
}
}

用你提供的例子中的 HTML 是可行的，但可能还要根据实际布局进行调整。
例如实际布局中 div 的 class 不可能是 div1，如果页面中其它元素的 class 是 home，也会被影响。

你先试试吧。

Answer 3

用jQuery框架很容易实现
<script src="http://code.jquery.com/jquery-latest.js"></script>

<script>
$(document).ready(function(){
$('div.div1 > ul >li').click(function(){
$(this).parent().children('li.home').removeClass('home');

$(this).addClass('home');

});

});

</script>
以上代码放入页面头部或尾部就行了

Answer 4

$(".div1").find("li").click(function(){
$(this).siblings().eq(0).removeClass("home");
})