ruby on rails框架集成了大量的web2.0效果,结合现在网站大量使用选项卡效果,我们也得让我们的ror项目结合潮流,下面有多个实例供大家参考使用:
1:仿126邮箱选项卡 鼠标点击
Html代码
- <!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" onclick="setTab('one',1,4)" class="hover">新闻1</li>
- <li id="one2" onclick="setTab('one',2,4)" >新闻2</li>
- <li id="one3" onclick="setTab('one',3,4)">新闻3</li>
- <li id="one4" onclick="setTab('one',4,4)">新闻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" onclick="setTab('two',1,4)" class="hover">新闻1</li>
- <li id="two2" onclick="setTab('two',2,4)" >新闻2</li>
- <li id="two3" onclick="setTab('two',3,4)">新闻3</li>
- <li id="two4" onclick="setTab('two',4,4)">新闻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:鼠标经过的
Html代码
- <!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" onmouseover="setTab('one',1,4)" class="hover">新闻1</li>
- <li id="one2" onmouseover="setTab('one',2,4)" >新闻2</li>
- <li id="one3" onmouseover="setTab('one',3,4)">新闻3</li>
- <li id="one4" onmouseover="setTab('one',4,4)">新闻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" onmouseover="setTab('two',1,4)" class="hover">新闻1</li>
- <li id="two2" onmouseover="setTab('two',2,4)" >新闻2</li>
- <li id="two3" onmouseover="setTab('two',3,4)">新闻3</li>
- <li id="two4" onmouseover="setTab('two',4,4)">新闻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选项卡效果
Html代码
- <!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[i].className=i==n?"hover":"";
- mli[i].style.display=i==n?"block":"none";
- }
- }
- /*第三种形式 利用一个背景层定位*/
- var m3={0:"",1:"评论内容",2:"技术内容",3:"点评内容"}
- function nowtab(m,n){
- if(n!=0&&m3[0]=="")m3[0]=document.getElementById("main2").innerHTML;
- document.getElementById("tip"+m).style.left=n*100+'px';
- document.getElementById("main2").innerHTML=m3[n];
- }
- //-->
- </script>
- </head>
- <body>
- <br />
- <br />
- <!--第一种形式-->
- <div id="tabs0">
- <ul class="menu0" id="menu0">
- <li onclick="setTab(0,0)" class="hover">新闻</li>
- <li onclick="setTab(0,1)">评论</li>
- <li onclick="setTab(0,2)">技术</li>
- <li onclick="setTab(0,3)">点评</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" onmouseover="setTab(1,0)"><a href="#">新闻</a></li>
- <li onmouseover="setTab(1,1)"><a href="#">评论</a></li>
- <li onmouseover="setTab(1,2)"><a href="#">技术</a></li>
- <li onmouseover="setTab(1,3)"><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" onmouseover="nowtab(2,0)"><a href="#">新闻</a></li>
- <li onmouseover="nowtab(2,1)"><a href="#">评论</a></li>
- <li onmouseover="nowtab(2,2)"><a href="#">技术</a></li>
- <li onmouseover="nowtab(2,3)"><a href="#">点评</a></li>
- </ul>
- </div>
- <div class="main" id="main2">
- 新闻内容
- </div>
- </div>
- <br />
- <br />
- <br />
- <br />
- <br />
- <br />
- <br />
- <br />
- </body>
- </html>
原文地址:http://qichunren.javaeye.com/blog/234032
http://www.roredu.com/rubyrails/2008/07/24/css-nav/