[集方法]今天做了一个多类切换导航效果

尽量少用TABLE吧,我试写了个:<body>
<style type="text/css">
.menu-container /*总体效果*/
{
width:600px;
padding:0px;
font-family:arial;
font-size:12px;
}.menubar /*菜单*/
{
display:inline-block;
clear:both;
margin-bottom:0px;
}.menu-item /*菜单项普通*/
{
float:left;
width:80px;
padding:2px;
margin-right:-1px;
text-align:center;
border:solid 1px black;
border-bottom:solid 0px black;
cursor:hand;
}.menu-item-selected /*菜单项选中*/
{
float:left;
width:80px;
padding:2px;
margin-right:-1px;
text-align:center;
border:solid 1px black;
border-bottom:solid 0px black;
font-weight:bold;
color:yellow;
background-color:black;
cursor:hand;
}.content-loader /*内容显示部分*/
{
width:600px;
height:400px;
border:solid 1px black;
}
</style><script type="text/javascript">
var menu=new Array("ASP",".net","C#","PHP","AJAX","Javascript","Solaris"); //菜单
var snapItem=null; //当前选择项
menuBar(menu); //生成function menuBar(menuArray) //初始化
{
var tempHtml="<div class=\"menu-container\"><div class=\"menubar\">";
for(i=0;i<menuArray.length;i++)
{
tempHtml+="<div class=\"menu-item\" id=\"item-"+i+"\" onmouseover=\"this.className='menu-item-selected';\" onmouseout=\"darken(this);\" onclick=\"highLight(this);\">"+menuArray[i]+"</div>";
}
tempHtml+="</div>";
tempHtml+="<div class=\"content-loader\"></div>"; //内容显示部分
tempHtml+="</div>";
document.write(tempHtml);
}function highLight(obj) //点击该项后的处理
{
for(i=0;i<menu.length;i++)
{
obj.parentNode.childNodes[i].className="menu-item";
}
obj.className="menu-item-selected";
snapItem=obj.id.replace(/item\-/i,"");
}function darken(obj) //鼠标走过
{
if(obj.id!="item-"+snapItem)
obj.className="menu-item";
}
</script>
</body>