Question

如何用原生js改变某id下的li的class？

<nav>
<div id="nav">
<ul id="MainNav">
<li class="" onmouseover="one(1);"><a href="A">A</a></li>
<li class="" onmouseover="one(2);"><a href="B">B</a></li>
</ul>

</div>
<ul id="SunNav">
<li class="" > <a href="a">a</a></li>
<li class=""> <a href="b">b</a></li>
</ul>
</nav>
<script type="text/javascript">
function one(num)
{

}

</script>
通过one 传递过来的数字 改变SunNav 里面的li 的class 传递过来1 就改变第一条li 传递过来二 就改变2 ，前提是不能用jquery 必须用原生的JS

Answer 1

<nav>
<div id="nav">
<ul id="MainNav">
<li class="" onmouseover="one(1);"><a href="A">A</a></li>
<li class="" onmouseover="one(2);"><a href="B">B</a></li>
</ul>

</div>
<ul id="SunNav">
<li class="" > <a href="a">a</a></li>
<li class=""> <a href="b">b</a></li>
</ul>

<!-- 在页面中直接调用，注意id和class为字符串 -->
<input type="button" value="更改" onClick="one('MainNav',1,'123')"/>
</nav>
<script type="text/javascript">
/**
* 通过数字，改变class名称
* idName 需要修改的li的父级id
* num 需要修改的li的位置（1代表第一个，2代表第二个，数量不得大于指定的id下的li的总数）
* className 改变后的class名
*/
function one(idName, num, className) {
var _li = document.getElementById(idName).getElementsByTagName("li");

_li[num-1].setAttribute("class",className);
}

// 函数中调用
one("SunNav",2,"456");

</script>

Answer 2

function one(val){

var t = val-1;
document.getElementById("SunNav").children[t].className="sss";
}

Answer 3

function one( num )
{
var className = 'cls'; // 需要设置的class名
var sunNav = document.getElementById( 'SunNav' );
var lis = sunNav.children;
if( num && num <= lis.length )
{
lis[ num - 1 ].setAttribute( 'class', className );
}

}

Answer 4

var ulObj=document.getElementById("MainNav");
var liList=ulObj.getElementsByTagName("li");
for(var i=0;i<liList.length;i++)
{
liList[i].style.className="class名称";
}

Answer 5

var obj = document.getElementById("SunNax");
if(num == 1){
obj.className="newclassname";

}else{

}