这是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. 异步任务神器 Celery-入门

    一.Celery入门介绍 在程序的运行过程中,我们经常会碰到一些耗时耗资源的操作,为了避免它们阻塞主程序的运行,我们经常会采用多线程或异步任务.比如,在 Web 开发中,对新用户的注册,我们通常会给他 ...

  2. 【腾讯云的1001种玩法】几种在腾讯云建立WordPress的方法(Linux)(二)

    版权声明:本文由张宁原创文章,转载请注明出处: 文章原文链接:https://www.qcloud.com/community/article/126547001488207964 来源:腾云阁 ht ...

  3. 动态性能视图v$mystat,v$sesstat,v$statname

    视图说明: v$mystat-------> 当前会话统计 v$sesstat------> 按会话进行分组统计 v$sysstat-------> 当系统的整体统计 v$statn ...

  4. nginx相关知识

    一.负载均衡与反向代理 server { listen 9008; server_name localhost; location / { proxy_pass http://web_server; ...

  5. 关于vmware虚拟机硬件里没有软盘驱动器,而操作系统里还有的解决方法

    问题描述:今天笔者使用VMware 11.1.0安装了一个windows 7的操作系统,安装完成后进入系统发现 在计算机里的[有可移动存储的设备]下有一个软盘驱动器(A:)如下图所示: 但回到虚拟里设 ...

  6. springmvc中为我们做了什么

    这应该是每个使用框架的人应该自问的.这就要从没有使用框架时说.在没用框架开发web应用时,自己是怎么开发的,就是写servlet,jsp. 使用springmvc后,使用Controller注解,其实 ...

  7. 数据交互axios的用法

    参考: https://www.cnblogs.com/zhouyangla/p/6753673.html

  8. vue里使用create、mounted调用方法的正确姿势

    参考:https://blog.csdn.net/Honnyee/article/details/82421844

  9. mui APP与服务器之间的交互原理

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

  10. HTML、CSS知识点,面试开发都会需要--No.7 数据列表

    No.7 数据列表 1.无序列表Unordered List 无序列表用block-level元素ul(unordered list)表示,每个item单独使用li(list)标记.如下代码所示: & ...