搜索

当前位置:首页 > 全栈分享 > 综合应用 > 正文

如何快速制作一个带特效的选项卡

发布时间:2017-10-05 20:46:16作者:魏义齐阅读:()

本文为博主原创文章,未经博主允许不得转载。

快速即能利用的就利用,利用不了的再自己写。本文案例需要软件Dreamweaver,技术css3和jQuery,操作如下:

一、用Dreamweaver建立一个规范的站点,插入spry选项卡式面板(窗口→工作区布局→经典→Spry→Spry选项卡式面板)。
ctrl+s→弹窗上点确定,之后会自动生成一根叫SpryAssets的文件夹,为方便管理,把这里面的css和js文件放到站点的对应文件夹里,并修改路径。

二、修改样式

默认的样式是非常丑的,把它改成你想要的样式,改样式之前先把默认的样式删除,即删除SpryTabbedPanels.css。

HTML代码:
  1. <!doctype html> 
  2. <html> 
  3. <head> 
  4. <meta charset="utf-8"> 
  5. <title>jQuery控制spry选项卡式面板</title> 
  6. <link type="text/css" rel="stylesheet" href="css/spry.css"> 
  7. <script src="js/SpryTabbedPanels.js" type="text/javascript"></script> 
  8. <script src="js/jquery-1.11.1.min.js"></script> 
  9. <script> 
  10. $(document).ready(function(){ 
  11. $("#bt1").hover(function(){ 
  12. $("#nr1").fadeIn(600); 
  13. $("#nr2").fadeOut();}); 
  14. $("#bt2").hover(function(){ 
  15. $("#nr2").fadeIn(600); 
  16. $("#nr1").fadeOut();}); 
  17. }) 
  18. </script> 
  19. </head> 
  20.  
  21. <body> 
  22. <section> 
  23.   <div id="TabbedPanels1" class="TabbedPanels"> 
  24.     <ul class="TabbedPanelsTabGroup"> 
  25.       <li class="TabbedPanelsTab" tabindex="0" id="bt1">标签 1</li> 
  26.       <li class="TabbedPanelsTab" tabindex="0" id="bt2">标签 2</li> 
  27.     </ul> 
  28.     <div class="TabbedPanelsContentGroup"> 
  29.       <div class="TabbedPanelsContent" id="nr1"> 
  30.         <p>祝所有群友国庆节快乐</p> 
  31.         <p>祝所有群友国庆节快乐</p> 
  32.         <p>祝所有群友国庆节快乐</p> 
  33.       </div> 
  34.       <div class="TabbedPanelsContent" id="nr2"> 
  35.         <p>祝所有群有中秋节快乐</p> 
  36.         <p>祝所有群有中秋节快乐</p> 
  37.         <p>祝所有群有中秋节快乐</p> 
  38.       </div> 
  39.     </div> 
  40.   </div> 
  41. </section> 
  42. <script type="text/javascript"> 
  43. var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1"); 
  44. </script> 
  45. </body> 
  46. </html> 
css代码:
@charset "utf-8"; 
/* CSS Document */ 
* { 
    margin: 0; 
    padding: 0; 
    list-style-type: none; 
    font-size: 16px; 
    font-family: "微软雅黑"; 
} 
a { 
    text-decoration: none; 
} 
section { 
    width: 800px; 
    height: auto; 
    margin: auto; 
} 
#TabbedPanels1 { 
    margin-top: 20px; 
} 
ul.TabbedPanelsTabGroup { 
    width: 200px; 
    height: 40px; 
    margin: auto; 
} 
ul.TabbedPanelsTabGroup li { 
    width: 90px; 
    text-align: center; 
    line-height: 40px; 
    float: left; 
    margin: 0 5px 0 5px; 
    background-color: #39F; 
    color: #FFF; 
    cursor: pointer; 
    transition: all 0.6s; 
    -moz-transition: all 0.6s; 
    -o-transition: all 0.6s; 
    -webkit-transition: all 0.6s; 
} 
ul.TabbedPanelsTabGroup li:hover { 
    background-color: #FC0; 
} 
.TabbedPanelsContentGroup { 
    margin-top: 10px; 
    width: 798px; 
    height: 498px; 
    border: solid 1px #CCC; 
    position: relative; 
} 
.TabbedPanelsContentGroup .TabbedPanelsContent { 
    position: absolute; 
    top: 0; 
    left: 0; 
} 
菜单样式用到了css3的transition属性,内容切换用到了jQuery的fadeIn()和fadeOut()方法。需要注意的几点是js库的使用;css3属性的兼容性;内容区淡出的时间,最好不要给时间,立即淡出,淡出的过程给了时间在内容区切换时会造成重影,显得比较乱。

效果预览:https://www.weiyiqi.net/lookdoc/spry/spry.html

我写的比较简单,本文只是展示修改默认样式的方法,内容区里面的东西你想怎么写就怎么写。

本文标签:,您可以阅读与「」相关的所有文章

魏义齐全栈技术交流:魏义齐全栈技术交流

上一篇:点击按钮在当前页面加载另一个页面的方法下一篇:点击弹出div层页面不可操作

赞助本站

原创不易,您的赞助就是博主更新的动力!

赞助本站可在赞助光荣榜留下外链信息,支付宝扫此二维码可领红包