这是html代码,里面写了left.html

<div id='mydiv'>
  <a class='qwe'>1</a>
  <a class='qwe'>2</a>
</div>
<script>
var url = window.location.href;
var a=document.getElementById("mydiv").getElementsByTagName("a");
for(var i=0;i<a.length;i++){
if(a[i].href == url){
a[i].className = a[i].className+" on";
}
}
</script>

以上是把a标签的class改变(添加“ on”)以达到切换样式的效果。可以有其他的变化,比如改变css。等等...

简单js 切换左侧栏目的样式的更多相关文章

  1. 一个简单且丑陋的js切换背景图片基础示例

    不多说,直接上代码,非常基础的一个原生js切换元素背景图片范例 <html> <head> <meta http-equiv="Content-Type&quo ...

  2. js之如何获取css样式

    js之如何获取css样式   一.获取内联样式 1 <div id ="myDiv" style="width:100px;height:100px; border ...

  3. js基础 1.简单js 语法 关键字 保留字 变量

    简单js JavaScript 是一个松散性的语言 对象属性却不想c中的结构体或者c++ 和java的对象, 对象继承机制 使用原型的prototype(原型链),js的分为三部分ECMAScript ...

  4. 简单JS全选、反选代码

    1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org ...

  5. python爬虫的一个常见简单js反爬

    python爬虫的一个常见简单js反爬 我们在写爬虫是遇到最多的应该就是js反爬了,今天分享一个比较常见的js反爬,这个我已经在多个网站上见到过了. 我把js反爬分为参数由js加密生成和js生成coo ...

  6. 简单js表单验证

     简单js表单验证demo <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org ...

  7. js简单图片切换

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

  8. 百度图表插件echart简单应用,简单配置一些要显示的样式及种类

    从echart官网下载js,然后引入jq即可运行.足够简单应用了 关键词:echart控制:图标标题.数据标题.折线图.柱状图切换按钮.恢复刷新图表按钮.保存为图片按钮.坐标系控制.坐标数据.坐标倾斜 ...

  9. 一个简单js select插件

    现在,通过一个select插件,来介绍一下js插件的构建过程. 1.先上效果图 2.目录构建 (1)这个select插件,我给它起名交hongselect,所以呢,首先建个hongselect的文件夹 ...

随机推荐

  1. puppet(5)-master/agent模式

    master/agent模式的工作流程 agent每隔固定时长会向master端发送nodename(自己的节点名,节点名至关重要)和 facts ,并且向服务器端请求自己的catalog. mast ...

  2. git纯净提交代码(只提交自己改过的文件)

    添加远程仓库,这个远程仓库是要进行发起合并请求的仓库,简单来说就是项目的主要代码库,不是自己派生的代码库 git remote add main http://xxx  从远端仓库下载新分支与数据gi ...

  3. webstorm安装 利用host破解

    1.官网下载,一路确定(其中最近一版还下载个什么玩意,不要取消,取消后即使安装了也报错找不到jvm的环境变量), 2  打开webstorm,首次使用前accept -->dont sent - ...

  4. python使用matplotlib绘制折线图教程

    Matplotlib是一个Python工具箱,用于科学计算的数据可视化.借助它,Python可以绘制如Matlab和Octave多种多样的数据图形.下面这篇文章主要介绍了python使用matplot ...

  5. jQuery实现限制input框 textarea文本框输入字符数量的方法

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  6. 网站美化:CSS3自定义修改浏览器滚动条

    滚动条组件 ::-webkit-scrollbar //滚动条整体部分 ::-webkit-scrollbar-thumb //滚动条里面的小方块,能向上向下移动(或往左往右移动,取决于是垂直滚动条还 ...

  7. JS常用各种正则表达式(汇总)

    匹配URL 这个url的正则表达式判断的JavaScript!比较全面的.它验证的情况包括IP,域名(domain),ftp,二级域名,域名中的文件,域名加上端口!用户名等等信息, function ...

  8. Ubuntu 18.04安装JDK并配置环境变量

    1.官网下载jdk 下载链接 http://www.oracle.com/technetwork/java/javase/downloads/index.html 可以根据自己的系统进行下载 2.进行 ...

  9. 【模拟与阅读理解】Gym - 101954C Rullete

    http://codeforces.com/gym/101954/problem/C 题意:14行伪代码让你翻译. 坑得yibi #include<stdio.h> #include< ...

  10. Python-----redis数据库

    # redis数据库:基于内存的高性能key-value数据库,整个数据库统统加载在内存当中进行操作,定期通过异步操作把数据库数据flush到硬盘上进行保存:#缺点:1.数据库容量受到物理内存的限制, ...