iDamaG™

在火狐3.5.3下的效果，加了CSS3 圆角
demo地址

$(function(){                      //jq代码不够精
$("#tab1").click(function(){
$("#d1").removeClass();
$("#d1").addClass("tab0");            //注意:addClass()方法只是添加，而不是替换!
$("#d2").removeClass();
$("#d2").addClass("tab");
$(".content1").slideDown(500);   // 第一个内容框下降
$(".content2").slideUp(500);    //第二个内容框上升*/
/*$(".content1").show();
$(".content2").hide();*/
} );

$("#tab2").click(function(){
$("#d1").removeClass();
$("#d1").addClass("tab");
$("#d2").removeClass();
$("#d2").addClass("tab0");
$(".content1").slideUp(500);   //第一个内容框上升
$(".content2").slideDown(500);  //第二个内容框*/
/*   $(".content2").show();
$(".content1").hide();*/
} );

});

body{ background:#CCCCCC;}
.tab,.tab0{
width:80px;
height:30px;
float:left;
margin:2px 2px 0px 2px;
text-align:center;
line-height:30px;
color:#FFFF99;
font-size:12px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
}
.tab{background:#333333;}
.tab0{ background:#FFFFFF;}
.clear{ clear:both;}
.content1,.content2{  width:250px;
font-size:12px;
line-height:20px;
margin:0px 2px 2px 2px;
background:#FFFFFF;
/*border:#FFFFFF solid 1px;*/
padding:5px;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;}
.content2{ display:none;}
a{ text-decoration:none; color:#999999;}

<div id="d1" class="tab0"><a id="tab1" href="#">Dota</a></div>
<div id="d2" class="tab"><a id="tab2" href="#">真三</a></div>
<div … Continue Reading