1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <title>无标题文档</title>
  6.  
  7. <style>
  8. .listyle1 {
  9.     background: url(images/col_23.jpg) no-repeat left;
  10. }
  11. .listyle2 {
  12.     background: url(images/col_11.jpg) no-repeat left;
  13. }
  14. .a1 {
  15.     color: blue;
  16.     padding-left:20px;
  17. }
  18. .a2 {
  19.     color: red;
  20.     padding-left:20px;
  21. }
  22. </style>
  23. <script>
  24. //函数功能：点击li，改变li的前缀图标和li的样式
  25. //5个参数
  26. //name:要点击的元素id
  27. //cursel:当前点击的元素
  28. //n:所有可以点击的元素数
  29. //cla1:前缀图标样式
  30. //cla2:超链接样式
  31. //ul:下级列表
  32. function setTab(name, cursel, n, cla1,cla2) {
  33.     for (i = 1; i <= n; i++) {
  34.         var prepic = document.getElementById(name + i);
  35.         prepic.className = i == cursel ? cla1 : "listyle1";
  36.         var aa = document.getElementById("a_" + name + "_" + i);
  37.         aa.className = i == cursel ? cla2 : "a1";
  38.     }
  39. }
  40. </script>
  41. </head>
  42.  
  43. <body>
  44. <ul style="list-style:none; line-height:30px; width:300px">
  45.   <li id="li1" class="listyle1" onClick="setTab('li',1,10,'listyle2','a2')"><a id="a_li_1" href="#" class="a1">学前教育</a></li>
  46.   <li id="li2" class="listyle1" onClick="setTab('li',2,10,'listyle2','a2')"><a id="a_li_2" href="#" class="a1">义务教育</a></li>
  47.   <li id="li3" class="listyle1" onClick="setTab('li',3,10,'listyle2','a2')"><a id="a_li_3" href="#" class="a1">高中教育</a></li>
  48.   <li id="li4" class="listyle1" onClick="setTab('li',4,10,'listyle2','a2')"><a id="a_li_4" href="#" class="a1">学前教育</a></li>
  49.   <li id="li5" class="listyle1" onClick="setTab('li',5,10,'listyle2','a2')"><a id="a_li_5" href="#" class="a1">义务教育</a></li>
  50.   <li id="li6" class="listyle1" onClick="setTab('li',6,10,'listyle2','a2')"><a id="a_li_6" href="#" class="a1">高中教育</a></li>
  51.   <li id="li7" class="listyle1" onClick="setTab('li',7,10,'listyle2','a2')"><a id="a_li_7" href="#" class="a1">学前教育</a></li>
  52.   <li id="li8" class="listyle1" onClick="setTab('li',8,10,'listyle2','a2')"><a id="a_li_8" href="#" class="a1">义务教育</a></li>
  53.   <li id="li9" class="listyle1" onClick="setTab('li',9,10,'listyle2','a2')"><a id="a_li_9" href="#" class="a1">高中教育</a></li>
  54.   <li id="li10" class="listyle1" onClick="setTab('li',10,10,'listyle2','a2')"><a id="a_li_10" href="#" class="a1">高中教育</a></li>
  55.  
  56. </ul>
  57.  
  58. </body>
  59. </html>

JavaScript：改变li前缀图片和样式的更多相关文章

  1. 点击li标记中的<a>标记改变li背景图片怎样实现

    <div class="nav"><ul><li id="li1" class="dianji" onclic ...

  2. JavaScript | 模拟文件拖选框样式 v1.0

    ————————————————————————————————————————————————————————— 文件拖选v1.0 图片不清楚时请右键点击"在新链接中打开图片" ...

  3. HTML5 Canvas ( 图片填充样式 ) fillStyle, createPattern

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. Javascript实现让小图片一直跟着鼠标移动

    Javascript实现让小图片一直跟着鼠标移动实例 注意:图片可能加载不出来,注意更换 <!doctype html> <html> <head> <met ...

  5. IIS发布，图片和样式显示不了的问题

    今天本地IIS部署在visual stuio 2013里运行成功的一个项目时,出现了样式和图片显示不了的情况,如下图 所有页面的样式和图片不显示,刚开始以为是发布之后的图片和样式的文件夹没有权限,可是 ...

  6. 一天JavaScript示例-点击图片显示大图片添加鼠标

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  7. JavaScript通过ID和name设置样式

    JavaScript通过ID和name设置样式 1.说明 (1)根据所提供的元素的id值,返回对该元素的引用或节点 document.getElementById("tr_th") ...

  8. JavaScript 获取和修改 内联样式

    JavaScript 获取和修改 内联样式 版权声明:未经授权,严禁转载分享! 元素的样式 HTML 元素的 style 属性返回一个 CSSStyleDeclaration 类型的对象. Style ...

  9. 使用javascript,jquery实现的图片轮播功能

    使用javascript,jquery实现的图片轮播功能本功能采用最基础的javascript和一些简单的jquery技术实现,易理解,以修改使用,代码简易,适合刚开始接触到网站开发的朋友们参考.可以 ...

随机推荐

  1. WinFrm窗体的传值方式

    比较简单的方法: 一:1.定义两个窗体 2.在父窗体中加入子窗体的属性 public ChildFrm ChildFrm { get; set; } 3.加载的时候: private void Par ...

  2. iOS：死锁

    死锁:指多个进程因竞争共享资源而造成的一种僵局,若无外力作用,这些进程都将永远不能再向前推进. 安全状态与不安全状态:安全状态指系统能按某个进程顺序来为每个进程分配其所需资源,直至最大需求,使每个进程 ...

  3. xp默认安装路径及本地用户配置文件存放路径修改

    xp默认安装路径及本地用户配置文件存放路径修改 修改注册表可能会造成您的系统崩溃或数据丢失,请先行备份操作系统,以备不测!!! 备份注册表步骤: 1.在“桌面”上按快捷键“Ctrl+R”,调出“运行” ...

  4. Candy Distribution_找规律

    Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 6012   Accepted: 3341 Description N chi ...

  5. 重装系统后删除Cygwin文件夹

    1.右键点要删除Cygwin 文件夹,依次选属性-安全-高级-所有者-编辑,将所有者改为你的登录帐户,勾选下方“替换子容器和对象的所有者”. 2.在 属性-安全-高级对话框中选 权限选项卡,点更改权限 ...

  6. CentOS安装Nginx负载

    一.准备 1.安装Nginx 地址:http://www.cnblogs.com/rainy-shurun/p/4983260.html 二.配置负载 1.配置nginx.conf

  7. supervisor很赞！

    最近,公司进行了新的架构设计,原来一个区服一组进程,变成了对外只有一台服,后面N组多进程进行服务的模式.于是,管理进程就变成了一个头痛的问题.原来是在写代码的目录里放置各种脚本解决的,关闭脚本,开启脚 ...

  8. metronic后台模板学习 -- 所用外部插件列表

    插件名称 描述 URL jQuery 1.11.0 js库,不用介绍了 http://www.jquery.com jQuery Migrate plugin 1.2.1 jQuery 老版本过渡迁移 ...

  9. MyEclipse 10 和 2014 两个版本共存破解 - imsoft.cnblogs

      第一步:运行 (run.bat)文件, 输入任意用户名 第二步:点击Systemid... 按钮,自动生成本机器的systemid. 第三步: 点菜单Tools->RebuildKey 第四 ...

  10. python数据结构与算法——小猫钓鱼(使用队列)

    按照<啊哈>里的思路实现这道题目,但是和结果不一样,我自己用一幅牌试了一下,发现是我的结果像一点,可能我理解的有偏差. # 小猫钓鱼 # 计算桌上每种牌的数量 # 使用defaultdic ...