脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery → jquery插件tytabs.jquery.min.js实现渐变TAB选项卡效果

jquery插件tytabs.jquery.min.js实现渐变TAB选项卡效果

 更新时间：2015年08月25日 11:04:55   作者：企鹅  
这篇文章主要介绍了jquery插件tytabs.jquery.min.js实现渐变TAB选项卡效果,实例分析了tytabs.jquery.min.js插件实现tab选项卡切换效果的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下

本文实例讲述了jquery插件tytabs.jquery.min.js实现渐变TAB选项卡效果。分享给大家供大家参考。具体如下：

这款网页特效主要是tytabs.jquery.min.js插件的实例演示，一个带有漂亮渐变效果的TAB选项卡，演示了一个网页上设置两个选项卡，都是带有淡入淡出的渐变效果，为了演示效果，里面我随便弄了些文字，用时候自己删除吧。

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/jquery-tytabs-tab-cha-menu-style-codes/

具体代码如下：

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery tab选项卡切换</title>
<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="js/tytabs.jquery.min.js"></script>
<script type="text/javascript">
<!--
$(document).ready(function(){
 $("#tabsholder").tytabs({
  tabinit:"2",
  fadespeed:"fast"
 });
 $("#tabsholder2").tytabs({
  prefixtabs:"tabz",
  prefixcontent:"contentz",
  classcontent:"tabscontent",
  tabinit:"3",
  catchget:"tab2",
  fadespeed:"normal"
 });
});
-->
</script>
<style>
*{padding: 0;margin: 0;font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;font-size: 12px;}
html, body{background-color: #2f2f2f;color: #eaeaea;}
img{border: none;}
.center{width: 400px;margin-left: auto;margin-right: auto;}
.centerText{text-align: center;}
a{color: #baee00;text-decoration: none;}
a: link{color: #baee00;}
a: visited{color: #baee00;}
a: hover{color: #baee00;text-decoration: underline;}
a: active{color: #baee00;}
.center{width: 60%;margin: 20px auto 0 auto;}
.marginbot{margin-bottom: 15px;}
ul.list li{list-style-type: none;margin-left: 20px;}
ul.tabs{width: 100%;overflow: hidden;}
ul.tabs li{list-style-type: none;display: block;float: left;color: #fff;padding: 8px;margin-right: 2px;border-bottom: 2px solid #2f2f2f;background-color: #1f5e6f;-moz-border-radius: 4px 4px 0 0;-webkit-border-radius: 4px 4px 0 0;cursor: pointer;}
ul.tabs li: hover{background-color: #43b0ce;}
ul.tabs li.current{border-bottom: 2px solid #43b0ce;background-color: #43b0ce;padding: 8px;}
.tabscontent{border-top: 2px solid #43b0ce;padding: 8px 0 0 0;display: none;width: 100%;text-align: justify;}
</style>
</head>
<body>
<div class="center">
 <p>&nbsp;</p>
 <!-- Tabs -->
 <div id="tabsholder">
 <ul class="tabs">
  <li id="tab1">Spiderman</li>
  <li id="tab2">Batman</li>
  <li id="tab3">Hulk</li>
  <li id="tab4">Daredevil</li>
 </ul>
 <div class="contents marginbot">
  <div id="content1" class="tabscontent">
  脚本之家（www.jb51.net）提供脚本源码、编程源码、网站源码、网页素材、书籍教程、网站模板、网页特效代码等，做有质量的学习型源码下载站。
  </div>
  <div id="content2" class="tabscontent">
  Donec eu velit ante, non dapibus nibh. Praesent condimentum ipsum eu ligula elementum pretium. Nullam vel mi odio, non tincidunt lorem. Etiam pulvinar eleifend velit non ornare. Etiam neque ante, posuere vitae bibendum ac, varius non augue. Sed cursus commodo dapibus. Nullam sed feugiat dolor. Praesent interdum elementum scelerisque. Etiam tincidunt lectus et nulla suscipit ut scelerisque elit egestas. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
  </div>
  <div id="content3" class="tabscontent">
HTML5技术结合jquery实现的自动生成缩略图程序，生成后排成一行，类似图片墙的效果，所以可以用在图片墙的效果中，HTML5效果也..一个html5实现的显示百分比的简洁漂亮的进度条特效，没有使用图片，HTML5超漂亮进度条特效代码，相信你会喜欢的。用到了HTML5..HTML5登录界面模板，jQuery+CSS3实现了超炫的外发光火焰特效，表单文本框带有默认文字效果，可作为一个管理员登录界面模板来完.CSS3多级导航菜单，图标菜单，圆角菜单，CSS3了不得啊，不知道一点貌似要OUT了，搞前端的更不能不看了。因为CSS3的每一款东西..
   </div>
  <div id="content4" class="tabscontent">
   一个绝对不容错过的CSS3特效，收集了90款漂亮的CSS3按钮样式集，全部通过样式定义的50个圆角渐变效果的网页按钮，红、黄、蓝、.
   </div>
 </div>
 </div>
 <!-- /Tabs -->
 <!-- Tabs2 -->
 <div id="tabsholder2">
 <ul class="tabs">
  <li id="tabz1">Captain America</li>
  <li id="tabz2">X-men</li>
  <li id="tabz3">Iron man</li>
  <li id="tabz4">Fantastic Four</li>
 </ul>
 <div class="contents marginbot">
  <div id="contentz1" class="tabscontent">
  Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In vel sem risus. Aenean vulputate, dui quis dignissim scelerisque, magna justo dapibus diam, a luctus justo lectus non orci. Donec aliquam risus sed nisl vulputate volutpat. Etiam molestie erat quis augue lobortis volutpat. Curabitur a tortor arcu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc hendrerit malesuada luctus. Proin at tellus feugiat nisl gravida blandit in nec erat. Sed varius, neque sit amet scelerisque vestibulum, augue eros hendrerit sapien, non imperdiet est ante in ipsum. Suspendisse ornare metus et velit rhoncus sodales
   </div>
  <div id="contentz2" class="tabscontent">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ante arcu, lacinia quis varius vel, pharetra eu sapien. Nulla dictum tincidunt nunc gravida congue. Quisque scelerisque, nulla ut sollicitudin lobortis, urna neque dapibus sem, quis congue tellus purus id nibh. Pellentesque congue massa ac quam rhoncus posuere.
  </div>
  <div id="contentz3" class="tabscontent">
  jquery实现的自动生成缩略图程序，生成后排成一行，类似图片墙的效果，所以可以用在图片墙的效果中，HTML5效果也..一个html5实现的显示百分比的简洁漂亮的进度条特效，没有使用图片，HTML5超漂亮进度条特效代码，相信你会喜欢的。
  </div>
  <div id="contentz4" class="tabscontent">
  Nam sed tellus metus. Nunc sem neque, mollis ac tempor sed, rhoncus vitae orci. Praesent vel tellus in felis condimentum ultrices eget at lectus. Donec aliquam, nunc et feugiat sagittis, nulla metus scelerisque risus, in eleifend magna diam vitae turpis. Proin cursus sagittis tellus sed iaculis. Nam tincidunt, augue ornare posuere dignissim, tellus velit vehicula massa, eu molestie ipsum quam sit amet nibh. Curabitur semper auctor leo eu elementum.
  </div>
 </div>
 </div>
 <!-- /Tabs2 -->
</div>
</body>
</html>

希望本文所述对大家的jquery程序设计有所帮助。

您可能感兴趣的文章:

相关文章

  • 直接拿来用的15个jQuery代码片段

    直接拿来用的15个jQuery代码片段

    开发人员利用jQuery代码不仅能给网站带来各种动画、特效，还会提高网站的用户体验。本文总结了开发者经常使用的15个jQuery代码片段，大家可以直接拿来用。
    2015-09-09
  • jQuery .tmpl() 用法示例介绍

    jQuery .tmpl() 用法示例介绍

    解决 PHP 拼数据这方面的问题而有了 Smarty 这些模版，JavaScript 也可以利用模版来解决这些问题，比如基于 jQuery 的 jquery.tmpl
    2014-08-08
  • jquery实现可拖动DIV自定义保存到数据的实例

    jquery实现可拖动DIV自定义保存到数据的实例

    这篇文章主要介绍了jquery实现可拖动DIV自定义保存到数据，有需要的朋友可以参考一下
    2013-11-11
  • jQuery.holdReady()方法用法实例

    jQuery.holdReady()方法用法实例

    这篇文章主要介绍了jQuery.holdReady()方法用法,以实例形式分析了holdReady()方法在暂停或者恢复jQuery.ready()事件的使用技巧,具有一定的参考借鉴价值,需要的朋友可以参考下
    2014-12-12
  • jQuery中DOM 属性使用实例详解下篇

    jQuery中DOM 属性使用实例详解下篇

    这篇文章主要为大家介绍了jQuery中DOM 属性使用实例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-08-08
  • jquery中change()用法实例分析

    jquery中change()用法实例分析

    这篇文章主要介绍了jquery中change()用法,实例分析了change的功能、定义及具体的使用技巧,非常具有实用价值,需要的朋友可以参考下
    2015-02-02
  • 详解Jquery 遍历数组之$().each方法与$.each()方法介绍

    详解Jquery 遍历数组之$().each方法与$.each()方法介绍

    这篇文章主要介绍了详解Jquery 遍历数组之$().each方法与$.each()方法介绍 ,具有一定的参考价值，有兴趣的可以了解一下。
    2017-01-01
  • jquery实现红色竖向多级向右展开的导航菜单效果

    jquery实现红色竖向多级向右展开的导航菜单效果

    这篇文章主要介绍了jquery实现红色竖向多级向右展开的导航菜单效果,涉及jquery鼠标hover事件结合class样式动态添加与删除的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-08-08
  • JQuery里选择超链接的实现代码

    JQuery里选择超链接的实现代码

    在一个客户的case中遇到需要在SharePoint Calendar试图里面根据一定的规则来显示或者隐藏记录，为了取得记录的handle，可以通过超链接选择器来查找
    2011-05-05
  • jquery实现滑动楼梯效果

    jquery实现滑动楼梯效果

    这篇文章主要为大家详细介绍了jquery实现滑动楼梯效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-09-09

最新评论