使用JS换class

1,

function ntabs(thisObj,Num)
            {if(thisObj.className == "active")return;  
            var tabObj = thisObj.parentNode.id;  
            var tabList = document.getElementById(tabObj).getElementsByTagName("li");  
            for(i=0; i <tabList.length; i++)
                {if (i == Num)
                    {thisObj.className = "active";  
                    document.getElementById(tabObj+"_cont"+i).style.display = "block";  
                    }
                    else{  
                        tabList[i].className = "normal";  
                        document.getElementById(tabObj+"_cont"+i).style.display = "none";  
                }  
            }  
        }

2,
$(document).ready(function(){

var $tab_li = $(‘.tab ul li‘);

$tab_li.hover(function(){

$(this).addClass(‘selected‘).siblings().removeClass(‘selected‘);

var index = $tab_li.index(this);

$(‘div.tab_box > div‘).eq(index).show().siblings().hide();

});

});

tab切换的两段js

时间: 2024-08-09 06:23:55

使用JS换class的相关文章

js实现换肤效果

一,js换肤的基本原理 基本原理很简单,就是使用 JS 切换对应的 CSS 样式表文件.例如导航网站 Hao123 的右上方就有网页换肤功能.除了切换 CSS 样式表文件之外,通常的网页换肤还需要通过 Cookie 来记录用户之前更换过的皮肤,这样下次用户访问的时候,就可以自动使用上次用户配置的选项. 那么基本工作流程就出来了:访问网页--JS 读取 Cookie --如果没有,使用默认皮肤--如果有,使用指定皮肤:用户点击换肤选项--JS 控制替换对应的 CSS 样式表--将皮肤选项写进 Co

ext.js的目录结构的简单解释

adapter:负责将里面提供第三方底层库(包括Ext自带的底层库)映射为Ext所支持的底层库.    build: 压缩后的ext全部源码(里面分类存放).    docs: API帮助文档.    exmaples:提供使用ExtJs技术做出的小实例.    resources:Ext UI资源文件目录,如CSS.图片文件都存放在这里面.    source: 无压缩Ext全部的源码(里面分类存放) 遵从Lesser GNU (LGPL) 开源的协议.    Ext-all.js:压缩后的E

node.js的安装环境搭建

.header { cursor: pointer } p { margin: 3px 6px } th { background: lightblue; width: 20% } table { text-align: center; margin-top: 20px; margin-left: 10px; margin-bottom: 20px } a { cursor: pointer; text-decoration: none; color: gray } a:hover { text

google maps js v3 api教程(1) -- 创建一个地图

原文地址 google maps javascript官方文档:https://developers.google.com/maps/documentation/javascript/ 在创建地图之前,我们进入 Google Developers Console创建一个key,用于我们开发地图的身份验证(当然,没有key也可以进行接下来的教程) 创建一个简单的地图: <!DOCTYPE html> <html> <head> <title>Simple Ma

OSChina 技术周刊第二十一期 —— 下一代 ECharts

每周技术抢先看,总有你想要的! 移动开发 [博客]Android ListView 复杂列表优化实践 前端开发 [翻译]100 行代码实现的 JavaScript MVC 样式框架 服务端开发/管理 [翻译]使用 React.js 和应用换成构建快速同步应用程序 [软件]ESB 服务器 Zato [软件]Kafka 管理工具 Kafka Manager [博客]用XSLT样式表加工后的XML显示DBF文件内容 [博客]Redis Cluster的FailOver失败案例分析 [博客]Tiny模板

ifream爱恨情缘

开幕场景 iframe.html [html] view plain copy <!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"> <hea

OPEN(SAP) UI5 学习入门系列之一:扫盲与热身(上)

什么是SAP Fiori? 了解SAP UI5必须要从SAP Fiori开始,两者概念经常被混淆,而两者也确实有着非常紧密的关系. 用过SAP的同学们都对SAP的传统的界面(SAP GUI)表示"呵呵",其实传统的SAP GUI的界面功能还是很强大的,但是对于一个新用户来说,学会使用这套界面就需要花上一两 周的时间,所以SAP入门的第一步就是学会使用SAP GUI.此外,传统的SAP GUI只能在Windows和Mac上使用,对于移动端用户没有直接的解决方案,WEBGUI的体验也非常不

博客园加上博客精灵

以前玩wordpress就喜欢这个博客精灵,现在给我博客园也加个这个,萌萌哒! 下面是教程 1. 准备好两个文件(右键另存) spig.js spig.png 2. 然后添加代码 CSS代码 .spig {display:block;width:175px;height:246px;position:absolute;bottom: 300px;left:180px;z-index:9999;} #message{color :#191919;border: 1px solid #c4c4c4;

【JavaScript】轻松更改网页背景与字体的颜色

JavaScript,通过点击按钮更改网页背景与字体的颜色,网页中有N个改变颜色的按钮,点击不同的按钮,网页的字体与背景就会改变成不同的颜色.很简单的JavaScript小程序. 一.基本目标 一打开网页首先提示问候信息"你好" 网页中有N个改变颜色的按钮,其中返回是返回网页的默认颜色,背景是白的,字体是黑的 点击不同的按钮,网页的字体与背景就会改变成不同的颜色. 本来想做出彩虹起色的,但原理完全一样就不多写按钮了. 二.基本思想 关键是对body标签与字体js提供id,使其在js中得