WEB教程基地:www.91ctc.com为你搭建学习WEB技术的优秀平台
网站地图 加入收藏 设为首页
您的位置:本站首页>>前端样式>>CSS+JS选项卡制作教程、CSS滑动门效果制作教程

CSS+JS选项卡制作教程、CSS滑动门效果制作教程

[ 录入者:91ctc | 时间:2012-07-17 22:30:53 | 作者: 91ctc| 来源:本站 | 浏览: 次 ]

选项卡(也称CSS滑动门效果)可以节省页面占据篇幅,节省空间。所以,不论是在大型门户网站,还是中小网站,应用十分广泛。作为网页设计师,掌握选项卡的制作十分重要,本讲讲述一个CSS选项卡的制作过程。先粘贴代码。

CSS部分:

CSS Code复制内容到剪贴板
  1. /*index.css文件*/  
  2. /*公共样式*/  
  3. body { font-size:12px;}   
  4. a { color:#000000text-decoration:none}   
  5. a:hover { color:#FF0000text-decoration:none}   
  6. /*选项卡样式*/  
  7. #Tab{width:277px;margin:0px;padding:0px;margin:0 auto;}   
  8. .Menubox { width:auto;height:32px;line-height:32pxbackground-color:#009900overflow:hiddenborder:0px;}   
  9. .Menubox ul{margin:0px 0px 0 0;padding:0pxdisplay:block;}   
  10. .Menubox li{float:left;display:block;cursor:pointer;width:55px;text-align:center;/*color:#949694;*/color:#FFFFFF;font-weight:boldlist-style:noneheight:31pxfont-size:14px;}   
  11. .Menubox li.hover{ margin:0px;padding:0px;background:#fff;width:55px;border-left:1px solid #95bd7f;border-top:1px solid #95bd7f;border-right:1px solid #95bd7f;color:#739242;font-weight:bold;height:31px;line-height:32px; }   
  12. .directory_title { width:276pxheight:18pxfont-size:13pxpadding:8px 0px 4px 4px;}   
  13. .contentbox li { margin:0px;padding:0pxdisplay:blockheight:20pxwidth:200px;line-height:27pxheight:20pxlist-style:none}   
  14. .display_none { display:none;}  

XHTML部分:

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
  5. <title>CSS选项卡效果-CSS+JS滑动门效果</title>  
  6. <link href="css/index.css" rel="stylesheet" type="text/css" />  
  7. <script>  
  8. <!--   
  9.     function setTab(name,cursel){//定义函数,setTab(),第一个参数为传递选项名的前缀;第二个为选项所处的序列号   
  10.         for(i=1;i<=5;i++){//一个for循环,让i小于等于5,因为我们一共有五个选项卡。   
  11.         var menu=document.getElementById(name+i);//获得选项名称所在的元素的id值,并赋值给menu变量   
  12.         var con=document.getElementById("con_"+name+"_"+i);//获得选项卡主体内容所在的元素的id值,并赋值给con变量   
  13.         menu.className=i==cursel?"hover":"";//如果i的值等于cursel的值,那么就使menu的引用的样式名称为hover,否则不引用hover样式   
  14.         con.style.display=i==cursel?"block":"none";//如果i的值等于cursel的值,那么就使con的样式显示方式改为块状显示(block显示),否则不显示(none)   
  15.     }   
  16. }   
  17. //-->  
  18. </script>  
  19. </head>  
  20.   
  21. <body>  
  22.     <!--选项卡开始-->  
  23.         <div id="Tab">  
  24.             <div class="Menubox">  
  25.                 <ul>  
  26.                 <li id="one1" class="hover" onmouseover="setTab('one',1)">选项一</li>  
  27.                 <li id="one2" onmouseover="setTab('one',2)">选项二</li>  
  28.                 <li id="one3" onmouseover="setTab('one',3)">选项三</li>  
  29.                 <li id="one4" onmouseover="setTab('one',4)">选项四</li>                   
  30.                 <li id="one5" onmouseover="setTab('one',5)">选项五</li>                   
  31.                 </ul>  
  32.             </div>  
  33.             <div class="contentbox">  
  34.             <!-------------------------------选项一start--------------------------->  
  35.                 <div id="con_one_1"><!--选项主体内容-->              
  36.                     <div class="directory_title">第一个选项卡的内容</div>  
  37.                         <ul>  
  38.                         <li><a href="#">选项一新闻标题一</a></li>  
  39.                         <li>选项一新闻标题二</li>  
  40.                         <li>选项一新闻标题三</li>  
  41.                         </ul>      
  42.                 </div>                 
  43.             <!-------------------------------选项一end----------------------------->  
  44.             <!-------------------------------选项二start--------------------------->  
  45.                 <div id="con_one_2" class="display_none">                  
  46.                     <div class="directory_title">第二个选项卡的内容</div>  
  47.                         <ul>  
  48.                         <li><a href="#">选项二新闻标题一</a></li>  
  49.                         <li>选项二新闻标题二</li>  
  50.                         <li>选项二新闻标题三</li>  
  51.                         </ul>                          
  52.                 </div>  
  53.             <!-------------------------------选项二end--------------------------->  
  54.             <!-------------------------------选项三start--------------------------->  
  55.                 <div id="con_one_3" class="display_none">  
  56.                     <div class="directory_title">第三个选项卡的内容</div>  
  57.                         <ul>  
  58.                         <li><a href="#">选项三新闻标题一</a></li>  
  59.                         <li>选项三新闻标题二</li>  
  60.                         <li>选项三新闻标题三</li>  
  61.                         </ul>  
  62.                 </div>  
  63.             <!-------------------------------选项三end--------------------------->  
  64.             <!-------------------------------选项四start--------------------------->  
  65.                 <div id="con_one_4" class="display_none">  
  66.                     <div class="directory_title">第四个选项卡的内容</div>  
  67.                         <ul>  
  68.                         <li><a href="#">选项四新闻标题一</a></li>  
  69.                         <li>选项四新闻标题二</li>  
  70.                         <li>选项四新闻标题三</li>  
  71.                         </ul>  
  72.                        
  73.                 </div>     
  74.             <!-------------------------------选项四end--------------------------->            
  75.             <!-------------------------------选项五start--------------------------->  
  76.                 <div id="con_one_5" class="display_none">  
  77.                     <div class="directory_title">第五个选项卡的内容</div>  
  78.                         <ul>  
  79.                         <li><a href="#">选项五新闻标题一</a></li>  
  80.                         <li>选项五新闻标题二</li>  
  81.                         <li>选项五新闻标题三</li>  
  82.                         </ul>                      
  83.                 </div>     
  84.             <!-------------------------------选项五end--------------------------->  
  85.   
  86.   
  87.             </div>         
  88.                    
  89.         </div>  
  90.     <!--选项卡结束-->  
  91. </body>  
  92. </html>  

上面的代码,笔者在IE6、IE7、IE8、火狐、谷歌几款浏览器下均测试通过。读者不妨也复制下来测试一下。注意,CSS文件的存放位置,本例是放在css目录下。JS部分只有6行代码。我们将JS部分单独拎出来:

JavaScript Code复制内容到剪贴板
  1. <script>   
  2. <!--   
  3.     function setTab(name,cursel){//定义函数,setTab(),第一个参数为传递选项名的前缀;第二个为选项所处的序列号   
  4.         for(i=1;i<=5;i++){//一个for循环,让i小于等于5,因为我们一共有五个选项卡。   
  5.         var menu=document.getElementById(name+i);//获得选项名称所在的元素的id值,并赋值给menu变量   
  6.         var con=document.getElementById("con_"+name+"_"+i);//获得选项卡主体内容所在的元素的id值,并赋值给con变量   
  7.         menu.className=i==cursel?"hover":"";//如果i的值等于cursel的值,那么就使menu的引用的样式名称为hover,否则不引用hover样式   
  8.         con.style.display=i==cursel?"block":"none";//如果i的值等于cursel的值,那么就使con的样式显示方式改为块状显示(block显示),否则不显示(none)   
  9.     }   
  10. }   
  11. //-->   
  12. </script>  

每一行都有注释,读者应该看得懂。看懂之后,就会举一反三了。其实,所谓的选项卡的本质是使用JS和CSS控制元素的显示方式为隐藏还是显示

PS:如果您对本文有纠错、质疑、转载、举报等问题时,请加入到网站Q&Q&群:86783981(验证信息:91ctc.com)提交您的问题,让大伙一块讨论。谢谢您的支持,计算机教程中心网将会一如既往的提供优秀资源助您一臂之力!
关闭】【返回顶部

您可能感兴趣的文章
91ctc.com 网络先锋,引领科技,本站原创作品[转载请注明出处]。网站Q&Q&群:86783981(验证信息:91ctc.com)
Copyright© 2010-2017 计算机教程中心网 . All rights reserved. 苏ICP备11081842号