您的当前位置:首页正文

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

2023-12-05 来源:站点网
导读我们经常可以在一些网站看到tab页面切换的效果,那么这是怎么实现的呢?下面小编就来教大家jQuery怎么实现tab页切换效果。首先我们新建一个html页面,然后把tab结构写好,一个大的div中嵌套一个小的标题块儿和一个内容块儿。没有样式的效果如下图。在把样式加上,效果如下图所示。再然后引入jQuery文件,准备写jQuery实现tab切换效果。主要jQuery代码如下,就是当点击某个li标签时,这个标签添加选中的样式,然后对应的内容显示出来,隐藏其他内容。最终效果如图所示,动态演示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/

具体代码如下:

上面的代码结构是之前已经写好的,我看可以,就不做任何调整了。没有什么累赘的代码。

CSS 代码

.m { margin: 100px; }.tab { width: 400px; margin: 0 auto; border: 1px solid #ddd; height: 40px; text-align: center; line-height: 40px; background: #fff; border-radius: 10px; overflow: hidden; }.tab li { float: left; width: 100px; position: relative; overflow: hidden; }.tab li:before, .tab li:after, .tab li a { -webkit-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; }.tab li:before, .tab li:after { content: ""; display: block; }.tab li:not(:first-child):after { background: #ddd; height: 20px; width: 1px; left: 0; top: 10px; position: absolute; }.tab li a { display: block; position: relative; z-index: 2; color: #000; font-size: 14px; }.tab li:before { width: 0; height: 0; top: 50%; left: 50%; z-index: 1; position: absolute; }.tab li:hover a { color: #fff; }.tab li:hover:before { box-shadow: 0 0 0 100px #36bc99; }.tab li:hover + li:after, .tab li:hover:after { height: 0; top: 20px; }

代码分析:

动画实现非常简单,只要使用 transition 属性即可。

控制自己的伪元素和下一个同级元素的伪元素,只需要使用 + 选择器即可。

其他代码都比较清晰简单,自己分析即可。

实现这个效果还是非常简单的,重点是平时的积累,以及各种参数的灵活搭配。想到实现方法,最终写代码是很快的事情。而且没有什么知识高点在里面。

CSS 之所以难,不是你不会,而是不不会去搭配。

其实,还是只还原了99%的设计效果,两条线一个在背景里面,一个在背景外面,想要把两条分割线都放到背景里面来,应该如何实现呢?可以思考一下。

安利一下 scss 。上面的 css 是编译出来的。其实用 scss 实现非常方便快捷,代码可读性也更高。

演示如下:

.m { margin: 100px;}.tab { width: 400px;margin: 0 auto;border: 1px solid $cdd;height: 40px;text-align: center;line-height: 40px; background: $cff;border-radius: 10px;overflow: hidden; li { float: left;width: 100px;position: relative;overflow: hidden; &:before,&:after,a {@include dz();} &:before,&:after { content: "";display: block; } &:not(:first-child) { &:after { background: $cdd;height: 20px;width: 1px;left: 0;top: 10px;position: absolute; } } a { display: block;position: relative;z-index: 2;color: $c00;font-size: 14px; } &:before { width: 0;height: 0;top: 50%;left: 50%;z-index: 1;position: absolute; } &:hover { a {color: $cff;} &:before { box-shadow: 0 0 0 100px $cyan; } & + li:after,&:after { height: 0;top: 20px; } } }}

当然,这段代码中我用了颜色变量以及 mixin 混入代码。你不能直接使用。

相信看了本文案例你已经掌握了方法,更多精彩请关注Gxl网其它相关文章!

推荐阅读:

css3的pointer-events使用详解

focus-within的使用详解

jQuery简单tab切换效果实现方法

这次给大家带来动画TAB切换怎样实现,动画TAB切换实现的注意事项有哪些,下面就是实战案例,一起来看一下。

设计师给了一个 tab 切换的效果图。虽然是一个很小的功能,但是前端工程师在实现的时候还是有很多细节需要注意。我写了一个 demo 给大家参考。

最终实现效果如下:

HTML5+CSS3 做一个灵动的动画 TAB 切换效果

为了 gif 动画能够展示细节,我将动画时间延长到了 3 秒

实现思路

间隔竖线,因为不是顶天立地的,所以不能用边框。我准备用伪元素实现。

只有 3 个竖线,但是有 4 个 li ,这个简单,可以用 :not(:first-child) 选择器来选择。

切换的背景颜色变化,因为想要有从小到大的效果,因此,也不能直接使用背景颜色实现,我也准备用伪元素实现。

如果用伪元素的大小来控制,计算会比较复杂,因此,我想用 box-shadow 阴影来实现。

好,大体就是如此了,下面开始写代码,如下:

HTML 代码

 <p class="m"> <ul class="tab"> <li><a href="">导航1</a></li> <li><a href="">导航2</a></li> <li><a href="">导航3</a></li> <li><a href="">导航4</a></li> </ul> </p>

上面的代码结构是之前已经写好的,我看可以,就不做任何调整了。没有什么累赘的代码。

CSS 代码

.m { margin: 100px; }.tab { width: 400px; margin: 0 auto; border: 1px solid #ddd; height: 40px; text-align: center; line-height: 40px; background: #fff; border-radius: 10px; overflow: hidden; }.tab li { float: left; width: 100px; position: relative; overflow: hidden; }.tab li:before, .tab li:after, .tab li a { -webkit-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; }.tab li:before, .tab li:after { content: ""; display: block; }.tab li:not(:first-child):after { background: #ddd; height: 20px; width: 1px; left: 0; top: 10px; position: absolute; }.tab li a { display: block; position: relative; z-index: 2; color: #000; font-size: 14px; }.tab li:before { width: 0; height: 0; top: 50%; left: 50%; z-index: 1; position: absolute; }.tab li:hover a { color: #fff; }.tab li:hover:before { box-shadow: 0 0 0 100px #36bc99; }.tab li:hover + li:after, .tab li:hover:after { height: 0; top: 20px; }

代码分析:

动画实现非常简单,只要使用 transition 属性即可。

控制自己的伪元素和下一个同级元素的伪元素,只需要使用 + 选择器即可。

其他代码都比较清晰简单,自己分析即可。

实现这个效果还是非常简单的,重点是平时的积累,以及各种参数的灵活搭配。想到实现方法,最终写代码是很快的事情。而且没有什么知识高点在里面。

CSS 之所以难,不是你不会,而是不不会去搭配。

其实,还是只还原了99%的设计效果,两条线一个在背景里面,一个在背景外面,想要把两条分割线都放到背景里面来,应该如何实现呢?可以思考一下。

安利一下 scss 。上面的 css 是编译出来的。其实用 scss 实现非常方便快捷,代码可读性也更高。

演示如下:

.m { margin: 100px;}.tab { width: 400px;margin: 0 auto;border: 1px solid $cdd;height: 40px;text-align: center;line-height: 40px; background: $cff;border-radius: 10px;overflow: hidden; li { float: left;width: 100px;position: relative;overflow: hidden; &:before,&:after,a {@include dz();} &:before,&:after { content: "";display: block; } &:not(:first-child) { &:after { background: $cdd;height: 20px;width: 1px;left: 0;top: 10px;position: absolute; } } a { display: block;position: relative;z-index: 2;color: $c00;font-size: 14px; } &:before { width: 0;height: 0;top: 50%;left: 50%;z-index: 1;position: absolute; } &:hover { a {color: $cff;} &:before { box-shadow: 0 0 0 100px $cyan; } & + li:after,&:after { height: 0;top: 20px; } } }}

当然,这段代码中我用了颜色变量以及 mixin 混入代码。你不能直接使用。

相信看了本文案例你已经掌握了方法,更多精彩请关注Gxl网其它相关文章!

推荐阅读:

css3的pointer-events使用详解

focus-within的使用详解

急.......JS实现Tab菜单的问题

按你目前这个形势,你用到了js调用id的形势,要改造有些麻烦,直接给你一个纯DIV+CSS,没有脚本的吧。

http://oa.haihua.com.cn/hse

打开网址自己查看代码。

用jquery怎么实现点击一栏目实现栏目变色,再点击另一栏目也变色,但原来的变回原色

效果:

代码:

<!doctype html>

<html lang="en">

 <head>

  <meta charset="UTF-8">

  <meta name="Generator" content="EditPlus®">

  <meta name="Author" content="">

  <meta name="Keywords" content="">

  <meta name="Description" content="">

  <title>Document</title>

<style>

ul li{

    float:left;

    width: 110px;

    margin: 0 5px;

    background-color:#fff;

    border:1px solid #000;

    line-height:25px;

    list-style: none;

    text-align: center;

    font-size:14px;

    font-family:'微软雅黑';

    cursor: pointer;

    color:#000;

    font-weight:bold;

}

ul li:hover,ul li.selected{

    background-color:#000;

    color:#fff;

}

</style>

<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>

<script>

$(function(){

    $("ul#navigator li").click(function(){

        $(this).addClass("selected").siblings().removeClass("selected");

    });

});

</script>

 </head>

 <body>

  <ul id="navigator">

    <li>首页</li>

    <li class="selected">公司介绍</li>

    <li>成功案例</li>

    <li>解决方案</li>

    <li>联系我们</li>

  </ul>

 </body>

</html>

本文如未解决您的问题请添加抖音号:51dongshi(抖音搜索懂视),直接咨询即可。

精彩推荐

更多阅读

Top