一般的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. springBoot jpa 分页

    1.jap中有自带的分页方法 在dao层中使用 Page<LinkUrl> findAll(Pageable pageable); 2.在controller层 public List&l ...

  2. PHPStorm2017.1.3永久激活方法之本地破解激活

    是时候升级你的phpstorm了,咱们马上行动! 下载 1.phpstorm https://www.jetbrains.com/phpstorm/download/ 2.破解包 破解补丁无需使用注册 ...

  3. nodejs学习8：windows连接mongodb出现的错误解决办法

    今天遇到了在windows下连接mongodb错误的情况,因为之前安装是正常的,而重启的电脑之后就再也连接不上.于是在群里求助了下,无果,查阅了官网的英文文档,终于有些眉目了,故此一记. 先吐槽下命令 ...

  4. iOS - NSString 封装

    在实际项目开发过程中,发现字符串使用频率还是非常高的,NSString提供了很多相关的API,但是在开发过程中发现很多业务功能都是相同的.因此根据在开发过程中遇到的字符串使用场景,进行了简单封装.具体 ...

  5. JMeter配置元件作用域

  6. web端 第一天认识基础

    .NET 分为两大类 一.客户端应用程序   C/S 技术: Winform WPF MFC   MVVM 二.外部端应用程序  B/S(网页端应用程序/WEB端/WEB端应用程序) 目前学的技术是A ...

  7. 数组Array和字符串String的indexOf方法，以及ES7(ES2016)中新增的Array.prototype.includes方法

    前言 我们在判断某一个字符是否存在于一个字符串中或者某一个值是否存在于一个数组中时,ES7之前我们需要使用indexOf,ES7引入了新的方法includes 语法 数组:Array.inexOf(s ...

  8. div高度不能自适应（子级使用float浮动，父级div高度不能自适应）

    1.问题截图: 2.问题描述: 由于地址.公司名长度的不定性,所以每一条地址所在的父级div高度不定,但是需要设置一个最小的高度min-height:48px;但是当内容增加的时候,父级div高度却不 ...

  9. LibreOJ #2003. 「SDOI2017」新生舞会

    内存限制:256 MiB 时间限制:1500 ms 标准输入输出 题目类型:传统 评测方式:文本比较 上传者: 匿名 01分数规划(并不知道这是啥..) km或费用流(并不会)验证 屠龙宝刀点击就送 ...

  10. CF Gym 100637J Superfactorial numeral system （构造）

    题意:给一个式子,ak,k>2时,0<=ak<k:ai都是整数,给你p,q让你求一组ak. 题解:构造,每次除掉q取整得到ai,然后减一减 #include<cstdio> ...