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. opencv3.2.0图像对比度与亮度调整

    ##名称:图像对象度与对比度调整(由轨迹条分别控制对比度和亮度值) ##平台:QT5.7.1+opencv3.2.0 ##时间:2017年12月13日 /***********建立QT控制台程序*** ...

  2. CSS 几款比较常用的翻转特效

    第一个:360度翻转特效 <style>* { margin:0; padding:0; } .aa { width: 220px; height: 220px; margin: 0 au ...

  3. 封装一个 TopBarBaseActivity

    什么是快速开发嘞,看这个效果 然而我只用了这么几行代码: activity_main.xml 里面什么也没有! 其实说白了哈,就是我把 TopBar 封装在 TopBarBaseActivity 里面 ...

  4. redis订阅与发布(把redis作为消息中间件)

    订阅频道127.0.0.1:6379> subscribe chat1Reading messages... (press Ctrl-C to quit)1) "subscribe&q ...

  5. 11 tensorflow在tf.while_loop循环(非一般循环)中使用操纵变量该怎么做

    代码(操纵全局变量) xiaojie=1 i=tf.constant(0,dtype=tf.int32) batch_len=tf.constant(10,dtype=tf.int32) loop_c ...

  6. springboot学习入门之三---启动原理

    3启动原理 3.1启动类 @SpringBootApplication public class Application { public static void main(String[] args ...

  7. 微信小程序接口开发中解决https外网调试问题

    准备工作 1.有一台阿里云的Linux CentOS6 服务器,安装支持ssl模块的Nginx 2.有自己的域名,把域名解析到指向该服务器IP,本例中将wx.wangjiang.net 解析到服务器I ...

  8. Ehcache.xml 配置及属性说明

    1.配置样例 <?xml version="1.0" encoding="UTF-8"?> <ehcache> <diskStor ...

  9. Apache服务器如何通过.htaccess文件设置防盗链？

    Apache服务器通过.htaccess文件设置防盗链 用户经常面对的一个问题就是服务器的流量问题,而站点文件被盗链是其中最为主要的部分.所谓盗链,是指其他网站直接链接我们网站上的文件,一般来说,盗链 ...

  10. tomcat idea optinos

    -server -XX:PermSize=128M -XX:MaxPermSize=256m -Xms512m -Xmx1024m