简单js 切换左侧栏目的样式

这是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。等等...

时间: 2024-11-05 23:27:35

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

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

不多说,直接上代码,非常基础的一个原生js切换元素背景图片范例 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>原生JS范例</title> <script type="text/javascript"> function changeBg()

简单js实现竖行tab切换

<!DOCTYPE ><html lang="ru"><head><title>简单js实现竖行tab切换</title><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><style type="text/css">*{margin:0;padding:0; -

uni-app添加自定义底部导航栏,实现根据权限动态切换底部栏目的功能

uni-app针对底部导航栏TabBar,只提供了动态修改样式文字和图标的API,并没有提供动态修改某个栏目的跳转链接.追加或者删除某个栏目的功能. 问题阐述:实际开发的项目中的确需要判断登录账户的权限,来动态显示某两个,或者某三个栏目 如:管理用户显示[首页,管理,我的],普通用户显示[首页,我的],中间的管理页面,就得动态判断是否要追加了 解决方案:隐藏原有的tabBar,添加自定义的底部导航栏 1.思路:参照原来导航栏的写法,延用原来TabBar的样式布局,在每个栏目的首页添加自定义导航栏

At.js:一个Twitter/微博样式的@自动完成插件

At.js 是一个Twitter / Weibo样式的@自动完成插件.Demo演示(演示地址jQuery引入失效,导致演示失败). 功能特性: 可以监听任何字符,不仅仅只是’@‘,可以设置监听不同的字符和使用不同的数据. 支持同时使用静态数据和动态数据(通过AJAX),静态数据会被优先使用,然后再用AJAX加载找不到的值. 可以给多个文本框设置监听事件. 内置缓存支持. 可以使用模板设置数据的显示格式. 鼠标/键盘控制:Tab或Enter键选择,Up和Down键上下导航. jQuery版本要求:

JS 操作Dom节点之样式

为了提高用户体验,我们经常会动态修改Dom节点的样式,各种浏览器差异比较大,我们如何应对?不断尝试,不断总结~! 1. style.getComputedStyle.currentStyle 内嵌样式: <!--body --><div style="width: 30px;background-color: #ff6a00;">我就是傻里傻气的,完全素颜!</div> 1 //内联样式优先级最高,通过style获取的样式是最准确的 2 var el

js切换效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

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

简单js JavaScript 是一个松散性的语言 对象属性却不想c中的结构体或者c++ 和java的对象, 对象继承机制 使用原型的prototype(原型链),js的分为三部分ECMAScript .文档DOM对象.浏览器BOM对象 1. 核心(ECMAScript) (语法.类型.语句.关键字.保留字.操作符.对象等)Ie6.7.8 第三版(ECMA-262) 兼容 2.文档对象 dom(ie6-7 基本都dom 一级(基本操作都可以),) 3.浏览器对象模型 BOM (控制浏览器显示无标

简单JS全选、反选代码

1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2<html xmlns="http://www.w3.org/1999/xhtml"> 3<head> 4<meta http-equiv="Cont

JS获取渲染后的样式

一般我们利用element.style.属性来获取CSS的样式,而此方法只能获取标签内的样式,无法获取头部或引入的样式,因此,而我们又需要获取其样式,则我们可以使用:(其中element为标签,proName为属性)document.defaultView.getComputedStyle(element)[proName]的方法获其样式,而此方法不支持IE6~IE8,因此我们针对IE8以下的使用element.currentStyle[proName] 我们可以通过下面方法使其兼容 1 /*