日期:2014-05-16  浏览次数:20369 次

怎样用js来实现下面类似菜单的效果?求代码,谢谢!!
具体效果就是CSDN登录页面登录框左边的那个

要求就是点击一个菜单时,这个菜单下面的线没有了,从而和内容混为一体,

最重要的是,单击哪个菜单,其对应的内容显示出来.

在线等!谢谢!!


------解决方案--------------------
服了你了,你说的是tab页的实现吧

简而言之,就是给 <li> 标签一个onclick事件,然后切换它的样式

<ul class= "game ">
<li id= "game1 " class= "selected2 "> <a onclick= "toggle(1,7, 'game ', 'gamelist ', 'selected2 '); " href= "javascript:void(0); " target= "_self "> 热门游戏 </a> </li>
<li id= "game2 "> <a onclick= "toggle(2,7, 'game ', 'gamelist ', 'selected2 '); " href= "javascript:void(0); " target= "_self "> ABCD </a> </li>
</ul>


/**
* 处理标签页控件
*
* id:当前突出的标签页的序数
* count:总共的标签页个数
* tabName:标签页名称
* contentName:标签内容容器的名称
* className:突出显示的标签页的效果
*/
function toggle(id,count,tabName,contentName,className) {
for (var i = 1; i <= count; i++ ) {
document.getElementById(contentName+i).style.display= 'none ';
document.getElementById(tabName+i).className= ' ';
}

document.getElementById(contentName+id).style.display= 'block ';
document.getElementById(tabName+id).className=className;
}