1，Html代码

 <body>

     <div id="box">

         <ul id="tab_nav">

             <li class="nonblank">购买标书</li>

             <li class="blank"></li>

             <li class="nonblank">法授</li>

             <li class="blank"></li>

             <li class="nonblank">银行资质证明</li>

             <li class="blank"></li>

             <li class="nonblank">查阅档案</li>

             <li class="blank"></li>

             <li class="nonblank">投标分工确认</li>

             <li class="blank"></li>

             <li class="nonblank">公章使用</li>

             <li class="blank"></li>

             <li class="nonblank">购买</li>

         </ul>

     </div>

 </body>

2，CSS代码

<style type="text/css">

        #box

        {

            height: 300px;

            margin-top: 200px;

            margin-left: 200px;

        }

        .nonblank

        {

            float: left;

            list-style: none;

            border: 1px solid #999;

            height: 31px;

            line-height: 31px;

            width: 110px;

            text-align: center;

            background-color: #efeff7;

            font-size: 15px;

            font-weight: 600;

            cursor:pointer;

        }

        .blank

        {

            float: left;

            border:none;

            border-bottom:1px solid #999;

            width:5px;

            line-height:31px;

            height: 32px;

            margin:0;

            list-style: none;

        }

    </style>

3，JS代码

<script type="text/javascript" src="script/jquery-1.6.2.min.js"></script>

    <script type="text/javascript">

        $(function () {

            $("li[class=nonblank]").each(function (index) {

                $(this).mouseover(function () {

//                    $(this).css("backgroundColor", "red");

                }).click(function () {

                    $("li[class=nonblank]").css("backgroundColor", "#efeff7");

                    $("li[class=nonblank]").css("borderBottom", "1px solid #999");

                    $(this).css("backgroundColor", "white");

                    $(this).css("borderBottom", "none");

                }).mouseout(function () {

//                    $("li[class=nonblank]").css("backgroundColor", "#efeff7");

                })

            })

        })

    </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中内置了许多函数,我们可以直接调用,但需要注意的是参数的个数和类型一定要和函数一致,有时候不一致时,可以进行数据类型转换 1．abs()函数[求绝对值的函数,只接受一个参数] # ...

  2. React-Native开发之原生模块封装（Android)升级版

     本文主题:如何实现原生代码的复用,即如何将原生模块封装. (尊重劳动成果,转载请注明出处:http://blog.csdn.net/qq_25827845/article/details/52862 ...

  3. ArcGIS10.3+Oracle12C+ArcGIS Server10.3安装布署(之二)

    1.创建PDB 输入 dbca 命令 2.安装完成后,连接PDBSDE的容器数据库 3.环境变量 从Oracle的官方网站下载   instantclient-basic-nt-12.1.0.2.0. ...

  4. import依赖范围的使用

    <!-- <parent> <groupId>org.springframework.boot</groupId> <artifactId>spr ...

  5. java 内存分析之堆栈空间

    package Demo; public class Demo { public static void main(String[] args) { Demo demo = new Demo(); ; ...

  6. Phoenix介绍(持续更新)

    现有hbase的查询工具有很多如:Hive,Tez,Impala,Shark/Spark,Phoenix等.今天主要记录Phoenix. phoenix,中文译为“凤凰”,很美的名字.Phoenix是 ...

  7. Eigen学习笔记2-Matrix类

    在Eigen中,所有的矩阵Matrix和向量Vector都是由Matrix类构造的.向量只不过是矩阵的特殊形式,只有一列(列向量)或者一行. Matrix模板类有6个参数,其中前三个参数是必须的.前三 ...

  8. DROP语句总结

    一.基本语句 通过使用 DROP 语句,可以轻松地删除索引.表和数据库.  1.DROP INDEX 语句 DROP INDEX 语句用于删除表中的索引. <!--用于 MS Access 的 ...

  9. inclusion_tag 界面的嵌套 和渲染

    后端的html渲染到前端: 如果后端直接定义的是html标签,传到前端的时候因为浏览器的安全机制就会直接渲染成字符串如果想要渲染成需要的标签,就需要在后端用make_save()进行包裹,或者直接在前 ...

  10. Celery学习---Celery 分布式队列介绍及安装

    Celery介绍和基本使用 Celery 是一个 基于python开发的分布式异步消息任务队列,通过它可以轻松的实现任务的异步处理, 如果你的业务场景中需要用到异步任务,就可以考虑使用celery, ...