一般的tab选项卡就只能两种样式，一种是选中或者是划过这个选项卡样式，一种是没选中或者没划过选项卡样式。

现在有这种需求，就是选中或划过tab选卡要不同样式。比如tab1选中或者划过是红色，tab2选中或者划过是绿色，tab3选中或者划过是蓝色。

实现方法就是动态覆盖原来的css样式。

代码如下：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title>tab选项卡</title>

        <script src="//cdn.bootcss.com/jquery/3.1.0/jquery.min.js"></script>

        <script>

            $(document).ready(function() {

                var list = $('#tab li');

                list.mouseover(function() {

                    list.removeClass('curr');

                    $(this).addClass('curr');

                })

            })

        </script>

        <style>

            * {

                margin: 0;

                padding: 0;

                list-style: none;

            }

            #tab li {

                float: left;

                color: #000;

                height: 30px;

                cursor: pointer;

                line-height: 30px;

                padding: 0 20px;

            }

            .tab1.curr {

                background: #ff0101;

            }

            .tab2.curr {

                background: #00ffa3;

            }

            .tab3.curr {

                background: #ffb9f9;

            }

        </style>

    </head>

    <body>

        <ul id="tab">

            <li class="tab1 curr">tab1</li>

            <li class="tab2">tab2</li>

            <li class="tab3">tab3</li>

        </ul>

    </body>

</html>

tab选项卡不同样式的效果的更多相关文章

  1. Tab选项卡切换卡JS效果

    <script type="text/javascript"> /* tab切换选项卡js效果 writed by *** 2010.08.13 1.currentid ...

  2. Tab选项卡点击 滑动效果js实现

    html部分代码: [html] css部分代码: *{ margin: ; padding:; list-style: none; font-size: 12px; } .notice{ width ...

  3. jQuery Tab选项卡切换代码

    jQuery Tab选项卡切换代码是一款简单的jquery tab选项卡切换网页特效代码样式,可以修改tab选项卡相关样式. 代码下载:http://www.huiyi8.com/sc/10863.h ...

  4. 下拉菜单效果和tab选项卡切换

    //下拉菜单效果和tab选项卡切换. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...

  5. 纯js实现网页tab选项卡切换效果

    纯js实现网页tab选项卡切换效果 百度搜索     js 点击菜单项就可以切换内容的效果

  6. vue实现tab选项卡切换效果

    tab选项卡切换效果: 通过点击事件传入参数,然后通过v-show来进行切换显示 <template> <div class="box"> <div ...

  7. 各种效果的tab选项卡

    ;(function($){ $.fn.tabso=function( options ){ var opts=$.extend({},$.fn.tabso.defaults,options ); r ...

  8. android tab选项卡的使用

    项目做完了,写写博客,在项目中遇到的一些问题,或者是自己觉得很不错的东西.这一篇主要是想和大家分享一下我在项目中封装的一个东西,就是tab选项卡.先看看效果图: 我在网上看了很多有关选项卡的demo, ...

  9. :target伪类制作tab选项卡

    :target伪类的作用是突出显示活动的HTML锚,下面是一个简单的例子: HTML代码: <div> <a href="#demo1">点击此处</ ...

随机推荐

  1. MATLAB 添加自定义的模块到simulink库浏览器

    在simulink 浏览器窗口File->new->library,打开编辑窗口,将自定义的模块托人编辑窗口.保存为DC_MOTOR_sub_lib.mdl文件. 新建function文件 ...

  2. ubuntu 12.04 source.list 源更新

    官方源: #deb cdrom:[Ubuntu 12.04 LTS _Precise Pangolin_ - Release i386 (20120423)]/ precise main restri ...

  3. windows下安装pm2

    安装pm2 npm install pm2 -g 添加系统环境变量 PM2_HOME=C:\Users\PCONE\.pm2 打开新的cmd命令行窗口,执行以下命令来安装服务 pm2-service- ...

  4. 查询日志logcat使用总结

    cmd命令行中使用adb logcat命令查看Android系统和应用的log,dos窗口按ctrl+c中断输出log记录.logcat日志中的优先级/tag标记: android输出的每一条日志都有 ...

  5. hihoCoder #1165 : 益智游戏 (挑战赛11 B题)

    题意:在一个序列中找到两个数a和b,使得a*b的因子个数最多,输出最多的因子个数. 思路:数据较多,处理会很慢.对序列中每个数字进行质数分解求因子个数,然后按照因子个数降序排列,对前50个因子最多的数 ...

  6. 数据分析R&Python-Rpy2包环境配置

    Rpy2环境配置 最近想将R整合到以flask为后端框架的web系统中,在服务器端做数据统计分析.需要将R语言整合到Python中,发现Python中的Rpy2可以调用R语言,所以花了一些时间配置了一 ...

  7. Uva 10635 Prince and Princess （LCS变形LIS）

    直接LCS是时间复杂度是O(p*q)的,但是序列元素各不相同,只要把其中一个序列映射成有序的, 另外一个序列再做相同的映射,没有的直接删掉,就变成了求另一个序列LIS. #include<bit ...

  8. 超全面Java 面试题（2.1）

    这部分主要是开源JavaEE框架方面的内容,包括hibernate.MyBatis.spring.Spring MVC等,由于Struts2已经是明日黄花,在这里就不讨论Struts2的面试题,此外, ...

  9. ovx openVirtex安装

    搞了好久的pox实验,中途一个星期没更新了吧, 今天继续... 新手第一次搞还是在虚拟机上最安全~ ovx参照上面的做吧,注意必须在联网的情况下,否则很多控件都连不上(第一次做的时候虚拟机没配ip 坑 ...

  10. UI调试神器 for ios：Reveal的使用与破解

    aaarticlea/jpeg;base64,/9j/4AAQSkZJRgABAQEAkACQAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aH