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. html基础-表格-列表（4）

    今天准备为大家准备了表格和列表. 一.文章有各种数据的表格这个网页也不例外. (1).标签意思 <table>----------------------表格开始 <caption& ...

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

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

  3. 模拟时钟（AnalogClock）

    模拟时钟(AnalogClock) 显示一个带时钟和分针的表面 会随着时间的推移变化 常用属性: android:dial 可以为表面提供一个自定义的图片 下面我们直接看代码: 1.Activity ...

  4. c#实现内存映射文件共享内存

    原文:http://blog.csdn.net/wangtiewei/article/details/51112668 内存映射文件是利用虚拟内存把文件映射到进程的地址空间中去,在此之后进程操作文件, ...

  5. iphone精简教程

    那么教程开始 首先讲一下到底什么是精简 精简,就是把iphone4里面没用的自带软件和一些没用的东西删除 比如说股票,facetime,itunes store这些从来不用的东西,把这些东西删除从而使 ...

  6. 百度网盘下载器 PanDownload v2.0

    PanDownload是一款坚持以用户体验为中心,畅快淋漓的下载为理念而打造的下载工具. 从2017年2月9日首个版本推出,时至今日已经一年七个月了,首先感谢大家一直以来的支持与建议,促使着我不断地对 ...

  7. linux 压缩解压命令zip、gz、tar.gz、bz2、tar.bz2、.tar.xz

    linux压缩格式:.gz windows压缩格式:.zip .rar默认情况下,windows和linux都支持zip格式,都不需要安装额外软件. .zip格式 压缩zip /usr/bin/zip ...

  8. python函数修饰器(decorator)

    python语言本身具有丰富的功能和表达语法,其中修饰器是一个非常有用的功能.在设计模式中,decorator能够在无需直接使用子类的方式来动态地修正一个函数,类或者类的方法的功能.当你希望在不修改函 ...

  9. font-family：中文字体的英文名称 （宋体 微软雅黑）

    宋体 SimSun 黑体 SimHei 微软雅黑 Microsoft YaHei 微软正黑体 Microsoft JhengHei 新宋体 NSimSun 新细明体 PMingLiU 细明体 Ming ...

  10. MVC技术的面试问题

    MVC中的三种方式: ORM框架:对象关系映射关系 ,面向对象的对象模型和关系型数据之间的相互转换.基于关系型数据库的数据存储,实现一个虚拟的面向对象的数据访问接口.只要提供了持久化类与表的映射关系, ...