注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

John's Blog

天空,有梦就可以飞翔!

 
 
 

日志

 
 
关于我

刚走出校园的毕业生,就读计算机网络专业,对网站建设有一定的基础。开始探求Drupal已有一段时间,对Drupal的发展很是看好。现就职于深圳慧衡科技有限公司(intematrix.cn),它是一家专门服务于中国及海外中小企业的网络营销分析和优化服务提供商。 QQ交流群:44581272

网易考拉推荐

同一网页使用多个滑动门(选项卡)的方法  

2009-05-29 11:43:17|  分类: 网页特效 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

在同一网页上使用多个滑动门(选项卡)的方法,有不少朋友曾经提到过,有时候需要在同一网页上使用多个选项卡,对不太熟悉CSS的朋友来说有点让他们头疼,希望通过本示例帮你解决这个问题。

效果:点击查看  演示

代码如下:

<style media="screen" type="text/css">
<!--
*{font-size:12px;}
html,body{margin:0;text-align:center;over-flow:hidden;height:100%;width:100%;}
UL{list-style-type:none; margin:0px;}
.ttl{height:18px;}
.ctt{
height:auto;
padding:6px;
clear:both;
border: 1px solid #CCCCCC;
}
.w936{
width:936px;
clear:both;
height: 120px;
margin-top: 20px;
margin-right: 0;
margin-bottom: 2px;
margin-left: 0;
}
.normaltab   {
color:#1F3A87;
}
.hovertab    {
color:#FF0000;
background-color: #99CC00;
}
.dis{display:block;}
.undis{display:none;}
.tabs {
width:100%;
background:#BBD9EE;
font-size:93%;
line-height:normal;
}
.tabs ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
.tabs li {
display:inline;
margin:0;
padding:0;
cursor: pointer;
}
.tabs a {
float:left;
background:url("http://www.codefans.net/jscss/demoimg/200905/tableft.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
.tabs a span {
float:left;
display:block;
background:url("http://www.codefans.net/jscss/demoimg/200905/tabright.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#666;
}
.tabs a span {float:none;}
.tabs a:hover span {
color:#FF9834;
}
.tabs a:hover {
background-position:0% -42px;
}
.tabs a:hover span {
background-position:100% -42px;
}
-->
</style>
<script type="text/javascript" language="javascript">
<!--
//http://www.codefans.net
function g(o){return document.getElementById(o);}
function HoverLi(n)
{
for(var i=1;i<=16;i++){g('tb_'+i);g('tbc_0'+i).className='undis';}
g('tbc_0'+n).className='dis';g('tb_'+n);
}
//-->
</script>
</head>
<body>
<div class="w936">
<div id="tb_" class="tb_ tabs">
<ul>
<li id="tb_1" onmouseover="HoverLi(1);"><a href="#"><span>菜单选项</span></a></li>
<li id="tb_2" onmouseover="HoverLi(2);"><a href="#"><span>菜单选项</span></a></li>
<li id="tb_3" onmouseover="HoverLi(3);"><a href="#"><span>菜单选项</span></a></li>
<li id="tb_4" onmouseover="HoverLi(4);"><a href="#"><span>菜单选项</span></a></li>
<li id="tb_5" onmouseover="HoverLi(5);"><a href="#"><span>菜单选项</span></a></li>
<li id="tb_6" onmouseover="HoverLi(6);"><a href="#"><span>菜单选项</span></a></li>
<li id="tb_7" onmouseover="HoverLi(7);"><a href="#"><span>菜单选项</span></a></li>
<li id="tb_8" onmouseover="HoverLi(8);"><a href="#"><span>菜单选项</span></a></li>
</ul>
</div>
<div class="ctt">
<div class="dis" id="tbc_01">内容1</div>
<div class="undis" id="tbc_02">内容2</div>
<div class="undis" id="tbc_03">内容3</div>
<div class="undis" id="tbc_04">内容4</div>
<div class="undis" id="tbc_05">内容5</div>
<div class="undis" id="tbc_06">内容6</div>
<div class="undis" id="tbc_07">内容7</div>
<div class="undis" id="tbc_08">内容8</div>
</div>
</div>
<div class="w936">
<div id="tb_" class="tb_  tabs">
<ul>
<li id="tb_9" onmouseover="HoverLi(9);"><a href="#"><span>菜单选项</span></a></li>
<li id="tb_10" onmouseover="HoverLi(10);"><a href="#"><span>菜单选项</span></a></li>
<li id="tb_11" onmouseover="HoverLi(11);"><a href="#"><span>菜单选项</span></a></li>
<li id="tb_12" onmouseover="HoverLi(12);"><a href="#"><span>菜单选项</span></a></li>
<li id="tb_13" onmouseover="HoverLi(13);"><a href="#"><span>菜单选项</span></a></li>
<li id="tb_14" onmouseover="HoverLi(14);"><a href="#"><span>菜单选项</span></a></li>
<li id="tb_15" conmouseover="HoverLi(15);"><a href="#"><span>菜单选项</span></a></li>
<li id="tb_16" onmouseover="HoverLi(16);"><a href="#"><span>菜单选项</span></a></li>
</ul>
</div>
<div class="ctt">
<div class="dis" id="tbc_09">内容9</div>
<div class="undis" id="tbc_010">内容10</div>
<div class="undis" id="tbc_011">内容11</div>
<div class="undis" id="tbc_012">内容12</div>
<div class="undis" id="tbc_013">内容13</div>
<div class="undis" id="tbc_014">内容14</div>
<div class="undis" id="tbc_015">内容15</div>
<div class="undis" id="tbc_016">内容16</div>
</div>
</div> 

  评论这张
 
阅读(273)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2016