<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>无标题文档</title>

<style>

.listyle1 {

    background: url(images/col_23.jpg) no-repeat left;

}

.listyle2 {

    background: url(images/col_11.jpg) no-repeat left;

}

.a1 {

    color: blue;

    padding-left:20px;

}

.a2 {

    color: red;

    padding-left:20px;

}

</style>

<script>

//函数功能：点击li，改变li的前缀图标和li的样式

//5个参数

//name:要点击的元素id

//cursel:当前点击的元素

//n:所有可以点击的元素数

//cla1:前缀图标样式

//cla2:超链接样式

//ul:下级列表

function setTab(name, cursel, n, cla1,cla2) {

    for (i = 1; i <= n; i++) {

        var prepic = document.getElementById(name + i);

        prepic.className = i == cursel ? cla1 : "listyle1";

        var aa = document.getElementById("a_" + name + "_" + i);

        aa.className = i == cursel ? cla2 : "a1";

    }

}

</script>

</head>

<body>

<ul style="list-style:none; line-height:30px; width:300px">

  <li id="li1" class="listyle1" onClick="setTab('li',1,10,'listyle2','a2')"><a id="a_li_1" href="#" class="a1">学前教育</a></li>

  <li id="li2" class="listyle1" onClick="setTab('li',2,10,'listyle2','a2')"><a id="a_li_2" href="#" class="a1">义务教育</a></li>

  <li id="li3" class="listyle1" onClick="setTab('li',3,10,'listyle2','a2')"><a id="a_li_3" href="#" class="a1">高中教育</a></li>

  <li id="li4" class="listyle1" onClick="setTab('li',4,10,'listyle2','a2')"><a id="a_li_4" href="#" class="a1">学前教育</a></li>

  <li id="li5" class="listyle1" onClick="setTab('li',5,10,'listyle2','a2')"><a id="a_li_5" href="#" class="a1">义务教育</a></li>

  <li id="li6" class="listyle1" onClick="setTab('li',6,10,'listyle2','a2')"><a id="a_li_6" href="#" class="a1">高中教育</a></li>

  <li id="li7" class="listyle1" onClick="setTab('li',7,10,'listyle2','a2')"><a id="a_li_7" href="#" class="a1">学前教育</a></li>

  <li id="li8" class="listyle1" onClick="setTab('li',8,10,'listyle2','a2')"><a id="a_li_8" href="#" class="a1">义务教育</a></li>

  <li id="li9" class="listyle1" onClick="setTab('li',9,10,'listyle2','a2')"><a id="a_li_9" href="#" class="a1">高中教育</a></li>

  <li id="li10" class="listyle1" onClick="setTab('li',10,10,'listyle2','a2')"><a id="a_li_10" href="#" class="a1">高中教育</a></li>

</ul>

</body>

</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. html5in24hours

    http://www.html5in24hours.com/books/the-book/code/ 1.浏览器测试 http://browsershots.org/ 2.http://www.fon ...

  2. Linux基础入门（新版）（实验五至实验八）

    实验五 环境变量与文件查找 (环境变量的作用与用法,及几种搜索文件的方法)   一.环境变量   1.变量 (1)常变量与值是一对一的关系 (2)变量的作用域即变量的有效范围(比如一个函数中.一个源文 ...

  3. 怎么用jquery判断浏览器类型和版本号？

    用jquery判断浏览器类型:判断浏览器类型是IE浏览器还是火狐甚至是opera或者苹果浏览器safari,jquery 特效代码如下:判断浏览器类型和版本号如下: 怎么用jquery判断浏览器类型? ...

  4. PAT (Basic Level) Practise：1004. 成绩排名

    [题目链接] 读入n名学生的姓名.学号.成绩,分别输出成绩最高和成绩最低学生的姓名和学号. 输入格式:每个测试输入包含1个测试用例,格式为 第1行:正整数n 第2行:第1个学生的姓名 学号 成绩 第3 ...

  5. C/C++中的隐藏依赖

    转载自:http://trarck.googlecode.com/svn/trunk/article/C/%E9%9A%90%E8%97%8F%E4%BE%9D%E8%B5%96.txt 隐藏依赖:即 ...

  6. CentOS下Web服务器环境搭建LNMP一键安装包

    CentOS下Web服务器环境搭建LNMP一键安装包 时间:2014-09-04 00:50来源:osyunwei.com 作者:osyunwei.com 举报 点击:3797次 最新版本:lnmp- ...

  7. js 如何判断页面里的某个值改变

    程序未改变变量的值前新增全局变量:var oldDivValue = document.getElementById("divid").innerHTML; 程序在改变变量值后执行 ...

  8. 精妙无比 8款HTML5动画实例及源码

    1.jQuery垂直带小图标菜单导航插件 今天我们要来分享一款jQuery菜单插件,这款jQuery菜单是垂直的样式,鼠标滑过菜单项时会出现一个背景,菜单项的右侧也会出现一个小箭头.另外值得注意的是, ...

  9. WebApp远程调试工具

    针对存在内嵌在客户端的webview项目中,在开发过程中我们希望能像PC上一下直接进行调试,提高我们平时的开发效率,这时候我们可以使用webApp远程调试工具-weinre. 安装: 本工具需要nod ...

  10. zboot/piggyback.c

    /* *    linux/zBoot/piggyback.c * *    (C) 1993 Hannu Savolainen */ /* *    This program reads the c ...