js修改li样式名

liang_sz 2010-02-02 10:27:27
初学者,大家不要见笑.
想实现的效果就是:
1、鼠标放上li显示不同的块;
2、同时修改当前li的样式名为"hover".

第一个功能已经实现,虽然写得很丑。连循环都没有用.

这是HTML代码

<div id="tabs2">
<ul>
<li onMouseOver="show1()" class="hover"><a href="#">Description </a></li>
<li onMouseOver="show2()"><a href="#">Reviews</a></li>
</ul>
</div>


这是js代码

function show1()
{
document.getElementById("Con_des").style.display = "block";
document.getElementById("Con_comments").style.display = "none";
//document.getElementById("tabs2").getElementsByTagName("li").className= "hover";
//this.className = "hover";
}

function show2()
{
document.getElementById("Con_des").style.display = "none";
document.getElementById("Con_comments").style.display = "block";
//document.getElementById("tabs2").getElementsByTagName("li").className= "hover";
//this.className = "hover";
}


第二个功能,就是上面函数注释部分,但是不起作用。
...全文
916 5 打赏 收藏 转发到动态 举报
写回复
用AI写文章
5 条回复
切换为时间正序
请发表友善的回复…
发表回复
北京不不 2010-02-03
  • 打赏
  • 举报
回复
到这里你都没错
var obj=document.getElementById("tabs2").getElementsByTagName("li")
可这你得到的是所有的li
你的一个个操作
for(i=0;i<obj.length;i++)
{
obj[i].className='hover';
}
passself 2010-02-03
  • 打赏
  • 举报
回复
楼上的不可以吗楼主
hechangmin 2010-02-02
  • 打赏
  • 举报
回复
<style>
.test
{
background:red;
}
</style>
<script>

function show1()
{
//document.getElementById("Con_des").style.display = "block";
//document.getElementById("Con_comments").style.display = "none";
document.getElementById("li1").className = "test";
document.getElementById("li2").className = "";
}

function show2()
{
//document.getElementById("Con_des").style.display = "none";
// document.getElementById("Con_comments").style.display = "block";
document.getElementById("li1").className = "";
document.getElementById("li2").className = "test";
}
</script>
<div id="tabs2">
<ul>
<li onMouseOver="show1()" class="hover" id="li1"><a href="#">Description </a></li>
<li onMouseOver="show2()"><a href="#" id="li2">Reviews</a></li>
</ul>
</div>

liang_sz 2010-02-02
  • 打赏
  • 举报
回复
顶呀,请大家帮忙解决一下
liang_sz 2010-02-02
  • 打赏
  • 举报
回复
我也尝试过这样写,直接把js写在HTML里。

<div id="tabs2">
<ul>
<li onMouseOver="show1()" onMouseOver="this.className='hover'" onMouseOut="this.className=''" class="hover"><a href="#">Description </a></li>
<li onMouseOver="show2()" onMouseOver="this.className='hover'" onMouseOut="this.className=''"><a href="#">Reviews</a></li>
</ul>
</div>

87,901

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧