步骤一:

在须要添加效果的<li>标签中添加onclick事件:<li onclick="setcurrent(this)">

步骤二:

加入JS代码:

function setcurrent(obj){
var a = document.getElementById('父级标签id').getElementsByTagName("li");
for(var i=0;i<a.length;i++){
a[i].className=""; //先把该父级标签下的所有<li>标签所有类清空
}
obj.className="current"; //再赋予被点击标签状态
}

HTML导航 - 点击更改背景的更多相关文章

  1. android 组件内部实现触摸事件,更改背景

    当我们需要实现触摸事件的时候,通常就会想到OnTouchEvent这个方法,它能够获取触摸点的坐标,而组件同样也有这样的一个功能,使用这个功能,可以实现组件在父布局界面上移动,缩放,更改背景图片.这里 ...

  2. 一款基于jquery的下拉点击改变背景图片

    今天给大家介绍一款基于jquery的下拉点击改变背景图片.单击右上角的图片,下拉显示可选择的背景图片,单击图片变为背景图.效果图下: 在线预览   源码下载 实现的代码. html代码: <a ...

  3. NotePad++更改背景颜色

    白色的编辑框看得眼睛不舒服,怎么样更改NotePad++的背景颜色使眼睛更舒服些? 1.设置--语言格式设置 2.设置背景色 “背景色”一栏,选择背景色颜色   “使用全局背景色”一栏要打上√,否则无 ...

  4. iOS 创建多个button实现点击改变背景颜色

    工程中需要实现与UISegmentedControl效果相似的一排一共十个button,如下图.但是SegmentedControl修改不太方便,就用button替代, 循环创建十个button,点击 ...

  5. WPF 用代码调用dynamic resource动态更改背景 - CSDN博客

    原文:WPF 用代码调用dynamic resource动态更改背景 - CSDN博客 一般dynamic resoource通常在XAML里调用,如下范例: <Button Click=&qu ...

  6. Windows点击更改适配器选项出现的网络连接为空

    前言:windows出现点击更改适配器选项出现的网络连接为空,一直找了很久,没有找到方法 解决方案: 1:点击状态: 2:点击网络重置 最后:电脑进行重启,即可.

  7. UIImagePickerController导航字体颜色和背景

    创建UIImagePickerController // 创建图片选择器 UIImagePickerController *picker = [[UIImagePickerController all ...

  8. ActionBar更改背景颜色(主题)

    1.默认是黑色的背景, 2.更改主题theme为Theme.AppCompat.Light即可,清单文件主题如下: <application android:name="com.ith ...

  9. css3动画,点击圆形背景扩展整个页面效果

    上次做项目的时候,要求点击链接,这个链接的圆形背景扩散充满整个页面,今天把这个效果整理一下,是简单的css3的动画特效,粘贴下面的代码看效果 <!DOCTYPE html> <htm ...

随机推荐

  1. [转]mysql索引详解

    转自:http://www.cnblogs.com/ggjucheng/archive/2012/11/04/2754128.html 什么是索引 索引用来快速地寻找那些具有特定值的记录,所有MySQ ...

  2. Laravel (5.5.33) 加载过程---make方法(四)

    /** * Resolve the given type from the container. * * @param string $abstract * @return mixed */ publ ...

  3. JavaScript中的 函数splice() 的使用。

    大二接触JavaScript初期,学习函数中有一道题: 定义一个2个参数的函数.第1个参数是一个数组,第2个参数是需要删除的元素.函数功能,在第1个实参数组中查找第2个实参提供的值,找到则删除该元素( ...

  4. HDU_1087_Super Jumping! Jumping! Jumping!_dp

    Super Jumping! Jumping! Jumping! Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 ...

  5. HDU_1026_Ignatius and the Princess I_BFS(保存路径)

    Ignatius and the Princess I Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (J ...

  6. Django中图片的上传并显示

    一.settings配置文件中配置 MEDIA_URL = '/media/' MEDIA_ROOT = os.path.join(BASE_DIR, 'medias').replace('\\', ...

  7. illumina测序原理

    一些常用基本概念的介绍: flowcell流动池 是指Illumina测序时,测序反应发生的位置,1个flowcell含有8条lane lane通道 每一个flowcell上都有8条泳道,用于测序反应 ...

  8. 基于python xlsxwriter、xlrd 生成测试报告

    import xlsxwriter,xlrd ''' 思路: 1.获取数据 2.整合数据 3.写入文件 ''' #筛选 def filt(category,table,filt_name=None,r ...

  9. Cesium学习笔记(五):3D 模型 (http://blog.csdn.net/umgsoil/article/details/74572877)

    Cesium支持3D模型,包括关键帧动画,皮肤的改变还有单个节点的选择等,Cesium还提供了了一个基于网络的工具,将COLLADA模型转换为glTF,方便和优化模型添加 还记得我们在实体添加的时候添 ...

  10. $.extend 合并对象(处理可传入0个或多个参数)

    function test(options){             $.extend({ },this.Default,options);                  var v = thi ...