漂亮css选项卡效果大全
ruby on rails框架集成了大量的web2.0效果，结合现在网站大量使用选项卡效果，我们也得让我们的ror项目结合潮流，下面有多个实例供大家参考使用：1：仿126邮箱选项卡 鼠标点击
http://www.roredu.com/rubyrails/wp-content/uploads/2008/07/1cwwwr8_uar8utz690-300x192.jpg
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html;charset=gb2312" /><title>简洁Tab</title><style type="text/css"><!--body,div,ul,li{ padding:0; text-align:center;}body{ font:12px "宋体"; text-align:center;}a:link{ color:#00F; text-decoration:none;}a:visited { color: #00F; text-decoration:none;}a:hover { color: #c00; text-decoration:underline;}ul{ list-style:none;}/*选项卡1*/#Tab1{width:460px;margin:0px;padding:0px;margin:0 auto;}/*选项卡2*/#Tab2{width:576px;margin:0px;padding:0px;margin:0 auto;}/*菜单class*/.Menubox {width:100%;background:url(http://www.hxcgw.com/bbs/upfile/20079299441652.gif);height:28px;line-height:28px;}.Menubox ul{margin:0px;padding:0px;}.Menubox li{ float:left; display:block; cursor:pointer; width:114px; text-align:center; color:#949694; font-weight:bold; }.Menubox li.hover{ padding:0px; background:#fff; width:116px; border-left:1px solid #A8C29F; border-top:1px solid #A8C29F; border-right:1px solid #A8C29F;background:url(http://www.hxcgw.com/bbs/upfile/200792994426548.gif); color:#739242; font-weight:bold; height:27px;line-height:27px;}.Contentbox{ clear:both; margin-top:0px; border:1px solid #A8C29F; border-top:none; height:181px; text-align:center; padding-top:8px;}--></style><script><!--/*第一种形式 第二种形式 更换显示样式*/function setTab(name,cursel,n){ for(i=1;i<=n;i++){var menu=document.getElementById(name+i);var con=document.getElementById("con_"+name+"_"+i);menu.className=i==cursel?"hover":"";con.style.display=i==cursel?"block":"none"; }}//--></script></head><body><br><br><div id="Tab1"><div class="Menubox"><ul> <li id="one1" class="hover">新闻1</li> <li id="one2">新闻2</li> <li id="one3" >新闻3</li> <li id="one4" >新闻4</li></ul></div> <div class="Contentbox"> <div id="con_one_1" class="hover">新闻列表1</div> <div id="con_one_2" style="display:none">新闻列表2</div> <div id="con_one_3" style="display:none">新闻列表3</div> <div id="con_one_4" style="display:none">新闻列表4</div> </div></div><br><div id="Tab2"><div class="Menubox"><ul> <li id="two1" class="hover">新闻1</li> <li id="two2">新闻2</li> <li id="two3" >新闻3</li> <li id="two4" >新闻4</li></ul></div> <div class="Contentbox"> <div id="con_two_1" >新闻列表1</div> <div id="con_two_2" style="display:none">新闻列表2</div> <div id="con_two_3" style="display:none">新闻列表3</div> <div id="con_two_4" style="display:none">新闻列表4</div> </div></div></body></html>
2：鼠标经过的
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html;charset=gb2312" /><title>简洁Tab</title><style type="text/css"><!--body,div,ul,li{ padding:0; text-align:center;}body{ font:12px "宋体"; text-align:center;}a:link{ color:#00F; text-decoration:none;}a:visited { color: #00F; text-decoration:none;}a:hover { color: #c00; text-decoration:underline;}ul{ list-style:none;}/*选项卡1*/#Tab1{width:460px;margin:0px;padding:0px;margin:0 auto;}/*选项卡2*/#Tab2{width:576px;margin:0px;padding:0px;margin:0 auto;}/*菜单class*/.Menubox {width:100%;background:url(http://www.hxcgw.com/bbs/upfile/20079299441652.gif);height:28px;line-height:28px;}.Menubox ul{margin:0px;padding:0px;}.Menubox li{ float:left; display:block; cursor:pointer; width:114px; text-align:center; color:#949694; font-weight:bold; }.Menubox li.hover{ padding:0px; background:#fff; width:116px; border-left:1px solid #A8C29F; border-top:1px solid #A8C29F; border-right:1px solid #A8C29F;background:url(http://www.hxcgw.com/bbs/upfile/200792994426548.gif); color:#739242; font-weight:bold; height:27px;line-height:27px;}.Contentbox{ clear:both; margin-top:0px; border:1px solid #A8C29F; border-top:none; height:181px; text-align:center; padding-top:8px;}--></style><script><!--/*第一种形式 第二种形式 更换显示样式*/function setTab(name,cursel,n){ for(i=1;i<=n;i++){var menu=document.getElementById(name+i);var con=document.getElementById("con_"+name+"_"+i);menu.className=i==cursel?"hover":"";con.style.display=i==cursel?"block":"none"; }}//--></script></head><body><br><br><div id="Tab1"><div class="Menubox"><ul> <li id="one1" class="hover">新闻1</li> <li id="one2">新闻2</li> <li id="one3" >新闻3</li> <li id="one4" >新闻4</li></ul></div> <div class="Contentbox"> <div id="con_one_1" class="hover">新闻列表1</div> <div id="con_one_2" style="display:none">新闻列表2</div> <div id="con_one_3" style="display:none">新闻列表3</div> <div id="con_one_4" style="display:none">新闻列表4</div> </div></div><br><div id="Tab2"><div class="Menubox"><ul> <li id="two1" class="hover">新闻1</li> <li id="two2">新闻2</li> <li id="two3" >新闻3</li> <li id="two4" >新闻4</li></ul></div> <div class="Contentbox"> <div id="con_two_1" >新闻列表1</div> <div id="con_two_2" style="display:none">新闻列表2</div> <div id="con_two_3" style="display:none">新闻列表3</div> <div id="con_two_4" style="display:none">新闻列表4</div> </div></div></body></html>
3:三种简单的Tab选项卡效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html;charset=gb2312" /><title>简洁Tab</title><style type="text/css"><!--body,div,ul,li{ margin:0 auto; padding:0;}body{ font:12px "宋体"; text-align:center;}a:link{ color:#00F; text-decoration:none;}a:visited { color: #00F; text-decoration:none;}a:hover { color: #c00; text-decoration:underline;}ul{ list-style:none;}.main{ clear:both; padding:8px; text-align:center;}/*第一种形式*/#tabs0 { height: 200px; width: 400px; border: 1px solid #cbcbcb; background-color: #f2f6fb;}.menu0{ width: 400px;}.menu0 li{ display:block; float: left; padding: 4px 0; width:100px; text-align: center; cursor:pointer; background: #FFFFff;}.menu0 li.hover{ background: #f2f6fb;}#main0 ul{ display: none;}#main0 ul.block{ display: block;}/*第二种形式*/#tabs1{ text-align:left; width:400px;}.menu1box{ position:relative; overflow:hidden; height:22px; width:400px; text-align:left;}#menu1{ position:absolute; top:0; left:0; z-index:1;}#menu1 li{ float:left; display:block; cursor:pointer; width:72px; text-align:center; line-height:21px; height:21px;}#menu1 li.hover{ background:#fff; border-left:1px solid #333; border-top:1px solid #333; border-right:1px solid #333;}.main1box{ clear:both; margin-top:-1px; border:1px solid #333; height:181px; width:400px;}#main1 ul{ display: none;}#main1 ul.block{ display: block;}/*第三种形式*/.menu2box{ position:relative; overflow:hidden; height:22px; width:400px; text-align:left; background: #FFFFff;}#tabs2 { height: 200px; width: 400px; border: 1px solid #cbcbcb; background-color: #f2f6fb;}#tip2{ position:absolute; top:0; left:0; height:22px; line-height:22px; z-index:0; width:100px; background: #f2f6fb;}#menu2{ position:absolute; top:0; left:0; z-index:1;}#menu2 li{ display:block; float: left; padding: 4px 0; width:100px; text-align: center; cursor:pointer;}--></style><script><!--/*第一种形式 第二种形式 更换显示样式*/function setTab(m,n){ var tli=document.getElementById("menu"+m).getElementsByTagName("li"); var mli=document.getElementById("main"+m).getElementsByTagName("ul"); for(i=0;i<tli.length;i++){tli.className=i==n?"hover":"";mli.style.display=i==n?"block":"none"; }}/*第三种形式 利用一个背景层定位*/var m3={0:"",1:"评论内容",2:"技术内容",3:"点评内容"}function nowtab(m,n){ if(n!=0&&m3=="")m3=document.getElementById("main2").innerHTML; document.getElementById("tip"+m).style.left=n*100+'px'; document.getElementById("main2").innerHTML=m3;}//--></script></head><body><br /><br /><!--第一种形式--><div id="tabs0"> <ul class="menu0" id="menu0"><liclass="hover">新闻</li><li >评论</li><li >技术</li><li >点评</li> </ul> <div class="main" id="main0"><ul class="block"><li>新闻列表</li></ul><ul><li>评论列表</li></ul><ul><li>技术列表</li></ul><ul><li>点评列表</li></ul> </div></div><br /><br /><!--第二种形式--><div id="tabs1"> <div class="menu1box"><ul id="menu1"> <li class="hover" ><a href="#">新闻</a></li> <li ><a href="#">评论</a></li> <li ><a href="#">技术</a></li> <li ><a href="#">点评</a></li></ul> </div> <div class="main1box"><div class="main" id="main1"> <ul class="block"><li>新闻列表</li></ul> <ul><li>评论列表</li></ul> <ul><li>技术列表</li></ul> <ul><li>点评列表</li></ul></div> </div></div><br /><br /><!--第三种形式--><div id="tabs2"> <div class="menu2box"><div id="tip2"></div><ul id="menu2"> <li class="hover" ><a href="#">新闻</a></li> <li ><a href="#">评论</a></li> <li ><a href="#">技术</a></li> <li ><a href="#">点评</a></li></ul> </div><div class="main" id="main2">新闻内容 </div></div><br /><br /><br /><br /><br /><br /><br /><br /></body></html>
原文地址：http://www.roredu.com/rubyrails/2008/07/24/css-nav/
页:
[1]