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. PDW V2培训简记

    最近有幸参加了微软专家进行的为期一周PDW培训,将一些知识点记录如下: 不知道PDW是什么东西的,简单介绍一下:这是微软与HP/Dell合作推出的SQL Server数据仓库一体机,由HP或DELL提 ...

  2. 打包jar问题

    一. 先说一下一般是动态布局最好,效率高,动态就是java写布局,这是 老外的专长,一般res目录是不能打包的,布局动态写,其余的就是图片什么的了,可以建一个assess文件夹,把图片放里面,打jar ...

  3. ASP.Net与JSP如何共享Session值

     思路: ASP.NET中序列化Session以二进制数据保存到数据库,然后由JSP读取数据库中的二进制数据反序列化成Session对象,再强制转化成JAVA的Session对象登录的ASPX文件 ...

  4. 报表使用hive数据源报java.net.SocketTimeoutException: Read timed out

    数据库表的数据量大概50W左右,在报表设计器下创建了hive的数据源,连接正常,由于数据量比较大,就用了润乾报表的大数据报表功能,报表设置好后,发布到页面中报错: 数据集ds1中,SQL语句SELEC ...

  5. ArrayMap代替HashMap

    ArrayMap是一个<key,value>映射的数据结构,它设计上更多的是考虑内存的优化,内部是使用两个数组进行数据存储,一个数组记录key的hash值,另外一个数组记录Value值,它 ...

  6. zookeeper应用 - FIFO 队列 分布式队列

    使用ZooKeeper实现的FIFO队列,这个队列是分布式的. package fifo; import java.util.Collections; import java.util.List; i ...

  7. OpenLDAP权限配置

    安装好了openldap之后,就是对它进行配置了,其中一项就是设置访问控制,限制普通用户只能修改/访问他们能修改/访问的项.这就是ACL需要做的事情. 设置方法 1.可以将 include行放在/et ...

  8. 配置 tsconfig.json

    作用 指导编译器如何生成 JS 文件 参数 target: 编译目标平台(es3, es5, es2015) module: 组织代码方式(commonjs, AMD) sourceMap:编译文件对 ...

  9. 【翻译&转载】shader的导数函数介绍

    原文链接:http://www.aclockworkberry.com/shader-derivative-functions/ 他人的翻译:http://blog.sina.com.cn/s/blo ...

  10. 使用ServiceBroker自动激活模拟"秒杀"场景

    1.简介 SQL Server Service Broker 是SQL server 里面比较独特的一个功能.它可帮助开发人员构建异步的松散耦合应用程序 ServiceBroker入门文章:http: ...