1

  1. <ul id="u1">
  2. <li class="sea one show1">海运</li>
  3. <li class="air one">空运</li>
  4. <li class="express one">快递</li>
  5. <li class="eche one">陆运</li>
  6. </ul>

  2:

  1. #u1 li.show1.sea {
  2. background-image: url(images/sea1.png);
  3. }
  4.  
  5. #u1 li.show1.air {
  6. background-image: url(images/air1.png);
  7. }
  8.  
  9. #u1 li.show1.eche {
  10. background-image: url(images/eche1.png);
  11. }
  12.  
  13. #u1 li.show1.express {
  14. background-image: url(images/express1.png);
  15. }

  3

$("#u1 li").click(function () {
$(this).addClass("show1");
})

  

CSS 点击图片替换样式的更多相关文章

  1. 进阶实战 css 点击按钮的样式

    1.  html结构 <div class="menu-wrap"> <input type="checkbox" class="t ...

  2. 复选框checkbox——用背景图片替换样式

    input { border : none; display : inline-block; width : 25px; height : 25px; -webkit-apearance : none ...

  3. CSS样式,雪碧,图片替换,渐变小析

    Css基础2: 相对长度单位:em,rem,px,%绝对长度单位:厘米等(不用)颜色单位:rgb,rgb的百分比,16进制(#),颜色名称字体:font-size:为了更好适合点阵,尽量使用偶数fon ...

  4. 移动Web—CSS为Retina屏幕替换更高质量的图片

    来源:互联网 作者:佚名 时间:12-24 10:37:45 [大 中 小] 点评:Retian似乎是屏幕显示的一种趋势,这也是Web设计师面对的一个新挑战;移动应用程序的设计师们已经学会了如何为Re ...

  5. 【onclick事件】【改变 HTML 内容innerHTML】【图片替换】【改变标签的css】【判断输入是否是数字】

    1.onclick事件 <button type="button" onclick="alert('Welcome!')">点击这里</but ...

  6. node.js入门学习(二)MIME模块,request和response对象,demo之不同url请求不同html页面,页面包含图片、样式css等静态资源

    一.构建http服务程序-根据不同请求做出不同响应 // 加载http模块 var http = require("http"); // 创建一个http服务对象 http.cre ...

  7. 几种垂直居中的方式及CSS图片替换技术

    由于块级元素的高度是可以设置的,所以对于块级元素的垂直居中比较简单. 方法一: 在不定高的情况下,把元素的上下内边距设为同一个值即可实现,即padding :10px   0; 以上方法针对块级元素和 ...

  8. CSS——图片替换方法比较

    图片替换主要是指将文字替换成图片的技术,即在html语句中使用文字,浏览器显示时用对应的图片显示.其意义在于便于做网站优化(SEO),文字才是搜索引擎寻找的主要对象. 经典的替换方法: Fahrner ...

  9. css图片替换方法

    图片替换主要是指将文字替换成图片的技术,即在html语句中使用文字,浏览器显示时用对应的图片显示.其意义在于便于做网站优化(SEO),因为文字才是搜索引擎寻找的主要对象. https://www.cn ...

随机推荐

  1. vue项目安装sass/scss

    vue 添加scss 安装好之后使用: 注意scss和sass的语法区别,scss是用传统花括号,sass是缩进控制,看个人习惯选择语言 sass语法看这里==>sass基本语法 vue项目编译 ...

  2. 【Eclipse】如何在Eclipse中如何自动添加注释和自定义注释风格

    背景简介 丰富的注释和良好的代码规范,对于代码的阅读性和可维护性起着至关重要的作用.几乎每个公司对这的要求还是比较严格的,往往会形成自己的一套编码规范.但是再实施过程中,如果全靠手动完成,不仅效率低下 ...

  3. [转]IISExpress配置使其能通过IP访问方法

    转自http://www.cnblogs.com/liujh/p/4315927.html 环境说明: 本机IP:192.168.2.100:Web端口:11843 步骤一 打开[我的文档]\IISE ...

  4. redis的键命令

    键的命令 查找键,参数支持正则 KEYS pattern 判断键是否存在,如果存在返回1,不存在返回0 EXISTS key [key ...] 查看键对应的value的类型 TYPE key 删除键 ...

  5. java.sql.SQLException: com.mysql.jdbc.Driver

    项目本来是 oracle 驱动 + druid 数据源配置,现在要修改为 mysql+druid数据源配置 启动项目的时候报:java.sql.SQLException: com.mysql.jdbc ...

  6. 21.xpath定位中id 、starts-with、contains、text()和last() 的用法

    xpath语法:id .starts-with.contains.text()和last() 的用法 <input id="su" class="bg s_btn ...

  7. maven 下载jar失败: Missing artifact javax.jms:jms:jar:1.1

    想从中央仓库下载, 却出现404, 原来,而中央仓库中都只有pom文件, 而没有jar包. 那就换一个 仓库吧: http://repository.jboss.com/maven2/: 终于找到了你 ...

  8. load_basemap

    map = new Map("map", { //basemap: "satellite", //center: [-85.743, 38.256], //zo ...

  9. 2. springboot启动报错:Field userMapper in com.service.UserService required a bean of type 'com.dao.UserMapper' that could not be found.

    报错信息: 2018-06-25 14:26:17.103  WARN 49752 --- [  restartedMain] ationConfigEmbeddedWebApplicationCon ...

  10. 浅析STM32之usbh_def.H

    [温故而知新]类似文章浅析USB HID ReportDesc (HID报告描述符) 现在将en.stm32cubef1\STM32Cube_FW_F1_V1.4.0\Middlewares\ST\S ...