1，Html代码

  1.  <body>
  2.      <div id="box">
  3.          <ul id="tab_nav">
  4.              <li class="nonblank">购买标书</li>
  5.              <li class="blank"></li>
  6.              <li class="nonblank">法授</li>
  7.              <li class="blank"></li>
  8.              <li class="nonblank">银行资质证明</li>
  9.              <li class="blank"></li>
  10.              <li class="nonblank">查阅档案</li>
  11.              <li class="blank"></li>
  12.              <li class="nonblank">投标分工确认</li>
  13.              <li class="blank"></li>
  14.              <li class="nonblank">公章使用</li>
  15.              <li class="blank"></li>
  16.              <li class="nonblank">购买</li>
  17.          </ul>
  18.      </div>
  19.  </body>

2，CSS代码

  1. <style type="text/css">
  2.         #box
  3.         {
  4.             height: 300px;
  5.             margin-top: 200px;
  6.             margin-left: 200px;
  7.         }
  8.         .nonblank
  9.         {
  10.             float: left;
  11.             list-style: none;
  12.             border: 1px solid #999;
  13.             height: 31px;
  14.             line-height: 31px;
  15.             width: 110px;
  16.             text-align: center;
  17.             background-color: #efeff7;
  18.             font-size: 15px;
  19.             font-weight: 600;
  20.             cursor:pointer;
  21.         }
  22.         .blank
  23.         {
  24.             float: left;
  25.             border:none;
  26.             border-bottom:1px solid #999;
  27.             width:5px;
  28.             line-height:31px;
  29.             height: 32px;
  30.             margin:0;
  31.             list-style: none;
  32.         }
  33.     </style>

3，JS代码

  1. <script type="text/javascript" src="script/jquery-1.6.2.min.js"></script>
  2.     <script type="text/javascript">
  3.         $(function () {
  4.             $("li[class=nonblank]").each(function (index) {
  5.                 $(this).mouseover(function () {
  6. //                    $(this).css("backgroundColor", "red");
  7.                 }).click(function () {
  8.                     $("li[class=nonblank]").css("backgroundColor", "#efeff7");
  9.                     $("li[class=nonblank]").css("borderBottom", "1px solid #999");
  10.                     $(this).css("backgroundColor", "white");
  11.                     $(this).css("borderBottom", "none");
  12.                 }).mouseout(function () {
  13. //                    $("li[class=nonblank]").css("backgroundColor", "#efeff7");
  14.                 })
  15.             })
  16.         })
  17.  
  18.     </script>

4，效果图

CSS+JQuery实现Tabs效果，点击更改背景色（不含图片）的更多相关文章

  1. 一个CSS+jQuery的放大缩小动画效果

    日期: 2013年9月23日 作者:铁锚 // 今天帮朋友写了一些代码,自己觉得写着写着,好几个版本以后,有点满意,于是就贴出来. // 都是定死了的.因为需求就只有4个元素.如果是要用CSS的cla ...

  2. jquery 单行滚动、批量多行滚动、文字图片翻屏滚动效果代码

    jquery单行滚动.批量多行滚动.文字图片翻屏滚动效果代码,需要的朋友可以参考下. 以下代码,运行后,需要刷新下,才能加载jquery,要不然看不到效果.一.单行滚动效果 <!DOCTYPE ...

  3. jQuery之动画效果show()......animate()

    jQuery之动画效果 1.show()显示效果 语法:show(speed,callback) Number/String,Function speend为动画执行时间,单位为毫秒.也可以为slow ...

  4. jQuery操作之效果

    jQuery操作之效果 效果操作一共分五类:1.基本,2.滑动,3.淡入淡出,4.自定义,5.设置 show(),hide(),toggle() 代码如下: html代码: <p style=& ...

  5. JQuery实战---窗口效果

    在前面的相关博文中,小编对jquery的相关知识进行了简单的总结,关于jquery的很多小的知识点,都需要我们自己去动手和实践,一行行代码都需要我们自己亲自动手去敲,今天我们继续来学习jquery的相 ...

  6. jquery横向手风琴效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. 15 个最佳 jQuery 翻书效果插件

    本文为你带来15个非常实用的.实现类似翻书效果的jQuery插件,你可以很容易地整合到你的web应用中,提升用户体验. 1.  BookBlock BookBlock可以将任何内容(如图像.文本)创建 ...

  8. js 实现淘宝无缝轮播图效果，可更改配置参数 带完整版解析代码[slider.js]

    前言:         本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽.         本篇文章为您分析一下原生JS写淘宝无缝轮播图效果 需求分析: ...

  9. jQuery实现放大镜效果

    1.1.1 摘要 相信大家都见过或使用过放大镜效果,甚至实现过该效果,它一般应用于放大查看商品图片,一些电商网站(例如:凡客,京东商城,阿里巴巴等)都有类似的图片查看效果. 在接下来的博文中,我们将向 ...

随机推荐

  1. Python爬虫学习记录【内附代码、详细步骤】

    引言: 昨天在网易云课堂自学了<Python网络爬虫实战>,视频链接 老师讲的很清晰,跟着实践一遍就能掌握爬虫基础了,强烈推荐! 另外,在网上看到一位学友整理的课程记录,非常详细,可以优先 ...

  2. CSS代码缩写

    盒模型代码简写 还记得在讲盒模型时外边距(margin).内边距(padding)和边框(border)设置上下左右四个方向的边距是按照顺时针方向设置的:上右下左.具体应用在margin和paddin ...

  3. Flutter: 图解 ListView 的多种绑定方式

       小菜昨天刚学习了一下底部状态栏 BottomNavigationBar 的基本使用方法,今天学习一下 ListView 的基本用法.       小菜觉得 Flutter 中 ListView ...

  4. linux 安装 zookeeper 集群

    关闭防火墙 systemctl stop firewalld.service systemctl disable firewalld.servicesystemctl status firewalld ...

  5. 前端构建工具 Gulp.js 上手实例

    在软件开发中使用自动化构建工具的好处是显而易见的.通过工具自动化运行大量单调乏味.重复性的任务,比如图像压缩.文件合并.代码压缩.单元测试等等,可以为开发者节约大量的时间,使我们能够专注于真正重要的. ...

  6. UPDATE语句总结

    一.基本语句 1.SQL UPDATE 语法 UPDATE table_name SET column1 = value1, column2 = value2, ... WHERE condition ...

  7. Vue2学习笔记:事件对象、事件冒泡、默认行为

    1.事情对象 <!DOCTYPE html> <html> <head> <title></title> <meta charset= ...

  8. mysql(5.7.17)字符集设置(character_set/collation)

    0 查看字符集(character_set/collation) use information_schema;desc tables;    --一定记住tables表,information_sc ...

  9. mysql性能优化-慢查询分析、优化索引和配置 （慢查询日志，explain，profile）

    mysql性能优化-慢查询分析.优化索引和配置 (慢查询日志,explain,profile) 一.优化概述 二.查询与索引优化分析 1性能瓶颈定位 Show命令 慢查询日志 explain分析查询 ...

  10. spring boot 在jdk 1.7下使用 commandLineRunner

    在spring boot 中有一段代码,使用的是java 1.8的语法: @Bean public CommandLineRunner commandLineRunner(ApplicationCon ...