一般的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. 零基础逆向工程19_PE结构03_代码节空白区添加代码_shellcode

    1.获取MessageBox地址,构造ShellCode代码 三种获取方法,参考文章末的一篇帖子. E8 E9计算公式 call 的硬编码:E8 00 00 00 00 jmp 的硬编码:E9 00 ...

  2. Android笔记--Bitmap(二)内存管理

    Bitmap(二) 内存管理 1.使用内存缓存保证流畅性 这种使用方式在ListView等这种滚动条的展示方式中使用最为广泛, 使用内存缓存 内存缓存位图可以提供最快的展示.但代价就是占用一定的内存空 ...

  3. python之map,zip,reduce,filter的用法

    1.reduce(func,iterable,initial): 参数: - func 可执行函数 - iterable 可迭代对象 - initial 可选,初始参数 功能描述:调用func函数后, ...

  4. TC和脚本语言

    TC:Turbo C 集成开发环境是由Borland 公司开发的一套C 语言开发工具,它集成了程序编辑.调试.链接等多种功能.在DOS 系统时代,Turbo C 是被最广泛使用的一种PC 机应用程序开 ...

  5. 感觉单链表是实现BCL ICollection 的最佳方式，所有操作都能以最小的时间复杂度完成

    public interface ICollection<T> : IEnumerable<T>, IEnumerable {     int Count { get; }// ...

  6. Kubernetes之pod的属性

    属性名称 取值类型                   是否必选 取值说明 version String Required(必) 版本号,例如v1 kind String Required pod m ...

  7. 2018.2.25 关于JavaScript

    关于JavaScript 1.数组的归约函数reduce(function(PREV,CUR,I){})会从做导游进行迭代,每次返回的值为下一次的prev参数. 2.在循环遍历数组时若是想在找到结果后 ...

  8. MFC：Unicode和多字节字符集下 CString和char的转化（MFC中）

    2011-05-16 00:10 1166人阅读 评论(0) 收藏 举报 mfcdelete Unicode下 CString转TCHAR TCHAR* szMsg = new TCHAR[wcsle ...

  9. apropos linux

    Apropos adj. 恰当的,关于,就...而言 adv. 顺便地,恰当地 All my suggestions apropos the script were accepted. 我所有有关该剧 ...

  10. 二叉树、二叉搜索树、平衡二叉树、B树、B+树的精确定义和区别探究

    概述 关于树的概念很多,B树,B+树,红黑树等等. 但是你去翻翻百度百科,或者用百度或者谷歌搜索一下中文的树结构的介绍,全都是狗屁.没有哪个中文网站是真正精确解释树的定义的,尤其是百度百科. 下面我要 ...