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. angularjs ui-view多视口多层嵌套路由配置

    最近研究了一下ui-view多层嵌套,整理了一下 1.最简单的ui-view用法 html部分: <ul class="nav navbar-nav"> <li ...

  2. bootstrap-table 的必备参数

    1: 链接接口 url  请求的数据类型:dataType : "json"   后台请求方法 method  locale: 'zh-CN',//中文支持 pagination: ...

  3. eventbus3-intellij-plugin插件搜不到

    一.eventbus3-intellij-plugin插件搜不到

  4. 观察者设计模式（ Observable类Observer接口）

    如果要想实现观察者模式,则必须依靠Java.util包中提供的Observable类和Observer接口. class House extends Observable{ // 表示房子可以被观察  ...

  5. javascript版format函数，方便实现复杂字串连接

    javascript版format函数,方便实现复杂字串连接 String.prototype.format = function () { var args = arguments; console ...

  6. [翻译] REMenu

    REMenu https://github.com/romaonthego/REMenu Dropdown menu inspired by Vine. 一款下拉菜单效果控件,灵感来自于Vine. R ...

  7. 下拉刷新对象RefreshObject

    下拉刷新对象RefreshObject 效果 说明 1. 分离了动画实现与刷新逻辑 2. 你可以根据自己的需要,设计自己的动画效果,你的动画只需要继承协议,实现协议里面的方法即可 3. 本设计方案是用 ...

  8. linux rz上传文件及出错解决方案

    在把Windows上的文件传至Linux端时用到SecureCRT,一般小文件都没有问题,文件太大时则出现了上传后的文件只有几K大小,当然大于2个G的是不可能传的上去的了.对于几百M到1G多的大文件要 ...

  9. Linux 系统的磁盘分区_【all】

    磁盘的存储逻辑结构 1.主引导扇区(446+64+2) MBR(主引导记录)0磁头0磁道的第一扇区 446字节 -->存放系统的引导程序,同Windows 剩下的64字节,分区表(每个分区16字 ...

  10. Centos7 apache2.4.29(httpd) 安装

    重点参考文章:https://blog.csdn.net/MrDing991124/article/details/78829184  写的很详细了,自己按着改博文走了不遍,不错! 一.配置安装环境 ...