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

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

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

代码如下：

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4.     <head>
  5.         <meta charset="utf-8" />
  6.         <title>tab选项卡</title>
  7.         <script src="//cdn.bootcss.com/jquery/3.1.0/jquery.min.js"></script>
  8.         <script>
  9.             $(document).ready(function() {
  10.                 var list = $('#tab li');
  11.  
  12.                 list.mouseover(function() {
  13.                     list.removeClass('curr');
  14.                     $(this).addClass('curr');
  15.                 })
  16.             })
  17.         </script>
  18.         <style>
  19.             * {
  20.                 margin: 0;
  21.                 padding: 0;
  22.                 list-style: none;
  23.             }
  24.  
  25.             #tab li {
  26.                 float: left;
  27.                 color: #000;
  28.                 height: 30px;
  29.                 cursor: pointer;
  30.                 line-height: 30px;
  31.                 padding: 0 20px;
  32.             }
  33.  
  34.             .tab1.curr {
  35.                 background: #ff0101;
  36.             }
  37.  
  38.             .tab2.curr {
  39.                 background: #00ffa3;
  40.             }
  41.  
  42.             .tab3.curr {
  43.                 background: #ffb9f9;
  44.             }
  45.         </style>
  46.     </head>
  47.  
  48.     <body>
  49.  
  50.         <ul id="tab">
  51.             <li class="tab1 curr">tab1</li>
  52.             <li class="tab2">tab2</li>
  53.             <li class="tab3">tab3</li>
  54.         </ul>
  55.  
  56.     </body>
  57.  
  58. </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. Canvas基本绘画学习

    学好Canvas,从简单开始.下面是一些Canvas入门最基本的实例分享: <!DOCTYPE html> <html> <head lang="en" ...

  2. .Net平台互操作技术：03. 技术验证

    上面两篇文章分别介绍了.Net平台互操作技术面临的问题,并重点介绍了通过P/Invoke调用Native C++类库的技术实现.光说不做是假把式,本文笔者将设计实验来证明P/Invoke调用技术的可行 ...

  3. informix服务端卸载后重新安装不成功

    可能原因: 1.实例未删除 2.配置文件未删除 安装成功后远程客户端连接不上问题: 1..如果自己设置的数据库实例报错,换一个数据库实例(database)试试,例如sysadmin

  4. SqlServer中嵌套事务使用--事务计数指示 BEGIN 和 COMMIT 语句的数目不匹配 －－根本问题

    转自  :SqlServer中嵌套事务使用--事务计数指示 BEGIN 和 COMMIT 语句的数目不匹配 --根本问题 问题: 1. System.Data.SqlClient.SqlExcepti ...

  5. javaSe-反射2

    //创建实体类 package com.java.chap07.sec03; public class Student { private String name; private Integer a ...

  6. acid （数据库事务正确执行的四个基本要素的缩写）

    ACID,指数据库事务正确执行的四个基本要素的缩写.包含:原子性(Atomicity).一致性(Consistency).隔离性(Isolation).持久性(Durability).一个支持事务(T ...

  7. 通用的flash代码

    黑体字部分为常修改的部分 <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase=&quo ...

  8. WINDOWS-基础：Thread.Sleep(0)

    我们可能经常会用到 Thread.Sleep 函数来使线程挂起一段时间.那么你有没有正确的理解这个函数的用法呢?思考下面这两个问题: 假设现在是 2008-4-7 12:00:00.000,如果我调用 ...

  9. NSURL初始化失败

    服务端给返回的网页加载不出来,仔细一看,url是空的!!为什么呢. 示例: NSString *urlStr = @"http://服务器返回带有汉字的url字符串.com"; N ...

  10. CentOS7 中使用 firewall-cmd 控制端口和端口转发

    0X00 firewalld 守护进程 firewall-cmd命令需要firewalld进程处于运行状态.我们可以使用systemctl status/start/stop/restart fire ...