js点击改变class的值

<ul>
                 <li class="nav_title" onclick="">文章管理1</li>
                 <li><a href="#">添加文章</a></li>
                 <li><a href="#">添加文章</a></li>
                 <li class="nav_title">产品管理</li>
                 <li><a href="#">添加文章</a></li>
                 <li><a href="#">添加文章</a></li>
                 <li class="nav_title">产品管理</li>
                 <li><a href="#">添加文章</a></li>
                 <li><a href="#">添加文章</a></li>
                </ul>js如何单击一下，改变class的值，如我单击一下文章管理1，
将class="nav_title' 改为class="nav_title_onclick"  再单击一下，又变成class="nav_title"了。

这个简单的效果如何实现. 请写在一个函数里，然后在onclick里调用！

12 个解决方案

#1

<style type="text/css">

<!--

 .nav_title{ background-color:#FFFF00}

 .nav_title_onclick{ background-color:#00FF00}

-->

</style><ul> 

                <li class="nav_title" onclick="g(this)">文章管理1 </li> 

                <li> <a href="#">添加文章 </a> </li> 

                <li> <a href="#">添加文章 </a> </li> 

                <li class="nav_title">产品管理 </li> 

                <li> <a href="#">添加文章 </a> </li> 

                <li> <a href="#">添加文章 </a> </li> 

                <li class="nav_title">产品管理 </li> 

                <li> <a href="#">添加文章 </a> </li> 

                <li> <a href="#">添加文章 </a> </li> 

                </ul>

				<script>

				function g(e){

				e.className=(e.className=="nav_title"?"nav_title_onclick":"nav_title")

				}

				</script>

这样?

#2

不错不错~~~

#3

ie下的class和ff下的不一样
ie可以直接



     obj.className=(obj.className=="nav_title"?"nav_title_onclick":"nav_title");

ff是class属性



obj.setAttribute("class",(obj.getAttribute("class")=="nav_title"?"nav_title_onclick":"nav_title"));

#4

测试了下，怎么加上<script type="application/javascript" language="javascript">就不行呢？
用<script>就行？

#5

接分。

#6

怎样才能兼容ie和ff

#7

对ff和ie分别判断

#8

先判断浏览器的说

#9

if(document.all)
{
//IE下的代码
}
else
{
//Firefox等的代码
}

#10

貌似上面的说法有些不对
用setAttribute时 ff下用写成class 如下代码直接写className 或者 class 就会有一个浏览器显示不出来

<style type="text/css">

.xx{ width:200px; height:200px; background-color:#FFFF99}

</style>

<body>

</body>

<script>

var div = document.createElement("div");

if(document.all)

{div.setAttribute("className", "xx")}//for IE

else

{div.setAttribute("class", "xx");}  //for firefox


document.body.appendChild(div)

</script>

但是直接用div.className的时候 2个浏览器都是可以显示的

<style type="text/css">

.xx{ width:200px; height:200px; background-color:#FFFF99}

</style>

<body>

</body>

<script>

var div = document.createElement("div");

div.className="xx"  //这个地方用div.class="xx"  在ff下是不会显示出样式的

document.body.appendChild(div)

</script>

测试版本 ie 6 ff 2.0
不信可以试试

#11

呵呵，楼上的

你到底说的是可以，还是不可以哦？

改变class不用setAttribute
直接用 obj.className

#12

我是想说直接写
用 obj.className ="xx"    兼容ie ff

setAttribute
就要区分  class  和className了
恩就是这个意思   ^_^

#1

<style type="text/css">

<!--

 .nav_title{ background-color:#FFFF00}

 .nav_title_onclick{ background-color:#00FF00}

-->

</style><ul> 

                <li class="nav_title" onclick="g(this)">文章管理1 </li> 

                <li> <a href="#">添加文章 </a> </li> 

                <li> <a href="#">添加文章 </a> </li> 

                <li class="nav_title">产品管理 </li> 

                <li> <a href="#">添加文章 </a> </li> 

                <li> <a href="#">添加文章 </a> </li> 

                <li class="nav_title">产品管理 </li> 

                <li> <a href="#">添加文章 </a> </li> 

                <li> <a href="#">添加文章 </a> </li> 

                </ul>

				<script>

				function g(e){

				e.className=(e.className=="nav_title"?"nav_title_onclick":"nav_title")

				}

				</script>

这样?

#2