一般的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. @vue/cli 3.x项目脚手架 webpack 配置

    @vue/cli  是一个基于 Vue.js 进行快速开发的完整系统. @vue/cli   基于node服务  需要8.9以上版本 可以使用 nvm等工具来控制node版本  构建于 webpack ...

  2. 织梦dedecms手机版上下篇链接错误的解决方法

    打开 \include\arc.archives.class.php 1. 找到 $this->PreNext['pre'] = "上一篇:<a href='$mlink'> ...

  3. Google Chrome 浏览器的备用（离线）安装程序

    Google Chrome 浏览器的备用(离线)安装程序(适用于 Windows) 如果您在使用 http://www.google.com/chrome 上的标准安装程序下载 Chrome 浏览器时 ...

  4. webservice、soap、wsdl

    搜集了一些关于webservice.soap.wsdl的基本知识,解决工作中遇到的疑问 一 .什么是webservice(用你的话描述webservice)?在什么时候用webservice(webs ...

  5. Python+selenium之测试报告（3）

    较测试报告(2),该文章将测试报告和测试截图存放在随机变动的文件夹下面,去除了要存放在指定文件夹下面的限制. 注:遇到问题有: 1.创建由时间自动拼接的多级文件夹 2. import os impor ...

  6. JavaScript_9_循环

    1. JavaScript for/in 语句循环遍历对象的属性: 可以遍历数组,也可以遍历一个对象的所有属性 <body> <p>点击按钮,循环遍历对象“person”的属性 ...

  7. last命令

    last——列出目前与过去登入系统的用户信息 命令所在路径:/usr/bin/last 示例1: $ last

  8. 如何使用ABAP Restful API进行代码的全文搜索

    使用这个代码全文搜索的前提条件,是在事务码SFW5里激活业务功能:SRIS_SOURCE_SEARCH 只需要把这个url贴到浏览器里: https://:44355/sap/bc/adt/repos ...

  9. Win10激活方法（企业版）

    Win10激活 注意:以管理员身份运行,需要电脑有网(亲测激活企业版没问题) 然后一条一条复制执行 slmgr /ipk NPPR9-FWDCX-D2C8J-H872K-2YT43 slmgr /sk ...

  10. Ubuntu 忘记root user密码 关闭图形界面

    忘记root密码 删除recovery nomodeset 才删除的后面添加 quiet splash rw init=/bin/bash.然后按F10, 启动 忘记User密码 http://blo ...