search

Home  >  Article  >  Web Front-end  >  jquery plug-in tytabs.jquery.min.js achieves gradient TAB tab effect_jquery

jquery plug-in tytabs.jquery.min.js achieves gradient TAB tab effect_jquery

WBOY
WBOYOriginal
2016-05-16 15:42:501369browse

The example in this article describes the jquery plug-in tytabs.jquery.min.js to achieve the gradient TAB effect. Share it with everyone for your reference. The details are as follows:

This web page special effect is mainly an example demonstration of the tytabs.jquery.min.js plug-in. A TAB tab with a beautiful gradient effect demonstrates the setting of two tabs on a web page, both with fade-in and fade-out. For the gradient effect, in order to demonstrate the effect, I made some random text in it. You can delete it yourself when you use it.

The screenshot of the running effect is as follows:

The online demo address is as follows:

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

The specific code is as follows: 

<!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> </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>

I hope this article will be helpful to everyone’s jquery programming design.

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Pure jquery to implement drop-down menu effect (code example)Next article：Pure jquery to implement drop-down menu effect (code example)

Related articles

See more