Question

如何使用JS来增加CSS样式的CLASS内容？

<script language="javascript">
var nav=document.getElementById("nav1");
</script>
我想实现当ID为nav1（或其他）的时候
下面的LI可以有class="current"这样的样式

<li id="nav1" rel="home">
<a href="/" >首页</a>
</li>
<li id="nav2" rel="skill" >
<a href="/games/39_new_pic.shtml">益智</a>
</li>
<script language="javascript">
document.getElementById("nav1").className='current';
</script>
这样好像也没反映

Answer 1

在页面内用JS操作CSS除非用AJAX，但操作页面内的样式的话，是可以的。操作样式分为改变直接样式，改变className和改变cssText三种
一、局部改变样式
调用方法：
改变className
<div id="demo">测试</div>
<script>
document.getElementById('demo').className="test";
</script>
改变直接样式
<div id="demo">测试</div>
<script>
document.getElementById('obj').style.backgroundColor="#003366";
</script>

二、全局改变样式

可以通过改变外链样式的的href的值实现网页样式的实时切换

<link rel = "stylesheet" type="text/css" id="css" href="firefox.css" />
<span on click="javascript:document.getElementById('css').href = 'ie.css'">点我改变样式</span>

Answer 2

如果不重新加载页面的话，以下是可以实现的。
<ul id="nav">
<li onclick="setTab(0)" rel="home"><a href="#">首页</a></li>
<li onclick="setTab(1)" rel="skill"><a href="#">益智</a></li>
</ul>
<script>
function setTab(n){
var tli=document.getElementById("nav").getElementsByTagName("li");
for(i=0;i<tli.length;i++){
tli[i].className=i==n?"current":"";
}
}
</script>

追问

需要页面加载的时候就显示了该class="current"
我可能有10个菜单，但是我只需要其中一个ID的菜单调用该样式而已。

追答

首页
益智
益智1
益智2
益智3

function setTab(n){
var tli=document.getElementById("nav").getElementsByTagName("li");
for(i=0;i

Answer 3

用jquery就很容易实现，花点时间看下就可以了

Answer 4

$("#nav1").addClass('current');