一般的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. CSS冗余简化（持续更新）

    1.float属性会把元素默认成inline-block状态,不需要再专门定义display了 2.对于inline而言,您设置line-height多大,很多时候并不需要定义height,其实际占据 ...

  2. [ros]编译ORBSLAM2时候，ros路径问题

    CMake Error at CMakeLists.txt:2 (include): include could not find load file: /core/rosbuild/rosbuild ...

  3. python+selenium之验证码的处理

    对于web应用来说,大部分的系统在用户登录时都要求用户输入验证码.验证码的类型很多,有字母数字的,有汉字的.甚至还有需要用户输入一道算术题的答案的.对于系统来说,使用验证码可以有效地防止采用机器猜测方 ...

  4. 数据库之游标过程-- 基于MySQL

    实例如下: DROP PROCEDURE IF EXISTS pr_change_station_user_acct_his; -- 如果存在存储过程,即删除存储过程 create procedure ...

  5. sqlserver创建触发器

    Create TRIGGER [dbo].[tr_Delete_AllocationedDN] --删除指定账户已分配未拣货的任务 ON [dbo].[FRU_PickLocationNew] --触 ...

  6. 洛谷 P1588 丢失的牛

    题目描述 FJ丢失了他的一头牛,他决定追回他的牛.已知FJ和牛在一条直线上,初始位置分别为x和y,假定牛在原地不动.FJ的行走方式很特别:他每一次可以前进一步.后退一步或者直接走到2*x的位置.计算他 ...

  7. 如何使用Java代码给图片增加倒影效果

    效果 倒影率为90%时的效果: 倒影率10%时的效果: 实现原理 倒影率作为参数rate 传入Reflection button的事件处理函数: CreateImageWithReflection这个 ...

  8. [VC]WindowProc和DefWindowProc函数

    在Windows操作系统里,当窗口显示之后,它就可以接收到系统源源不断地发过来的消息,然后窗口就需要处理这些消息,因此就需要一个函数来处理这些消 息.在API里定义了一个函数为回调函数,当系统需要向窗 ...

  9. HDU 5094 Maze （状压）

    加一个维度,钥匙的状态,状压一下.n很小,钥匙也只有10个,bfs就好了. 忘了数组初始化.以后坚决不犯这种低级错误. #include<cstdio> #include<queue ...

  10. WINDOWS-API：关于线程 GetCurrentThread、GetCurrentThreadId、GetCurrentProcess、GetCurrentProcessId

    {返回当前线程的虚拟句柄} GetCurrentThread: THandle; {返回当前线程 ID} GetCurrentThreadId: DWORD; {返回当前进程的虚拟句柄} GetCur ...