基于JS实现简单的样式切换效果代码
作者：企鹅 发布时间：2024-04-22 13:08:53
标签：JS,样式,切换
本文实例讲述了基于JS实现简单的样式切换效果。分享给大家供大家参考。具体如下：
这是一款基于JS实现简单的样式切换代码，自由切换CSS样式，很多大网站现在正在用，我觉得这是个挺实用的不错的功能，希望大家喜欢哦。
运行效果截图如下：
在线演示地址如下：
http://demo.jb51.net/js/2015/js-simple-tab-cha-style-codes/
具体代码如下：
<!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-Type" content="text/html; charset=gb2312" />
<script language="javascript" type="text/javascript">
var lastObj=null;
var lastIdx=1;
function test(obj,idx){
if(!lastObj){
lastObj = document.getElementById("test");
lastIdx = 1;
}
lastObj.className = "new"+lastIdx;
var old = document.getElementById("list"+lastIdx);
if(old)old.style.display="none";
obj.className = "class"+idx;
var n = document.getElementById("list"+idx);
if(n)n.style.display="block";
lastObj = obj;
lastIdx = idx;
}
</script>
<style type="text/css">
.class1{ color:#FF0000}
.new1{ color:#996633}
.class2{ color:#FF0000}
.new2{ color:#996633}
</style>
<title>JS实现样式切换</title>
</head>
<body>
<a href="#" class="class1" id="test" onclick="test(this,1)">list1</a>
<a href="#" class="new2" onclick="test(this,2)">list2</a>
<div id="list1">
test1
</div>
<div id="list2" style="display:none">
test2
</div>
</body>
</html>
希望本文所述对大家的javascript程序设计有所帮助。
0
投稿猜你喜欢
- 从98年某月某日我的第一个个人猪页诞生.到2008年的今天.宣告了我从事设计行业整整十年.十年,很多变化,从摆弄个人猪页到现在以做设计为生,
- 在近几年Python的呼声越来越高，很多刚开始起步想要学习编程的朋友都会犹豫要不要选择学习Python，毕竟作为人工智能时代的首选语言这个诱
引言膨胀与腐蚀是图像处理中两种最基本的形态学操作，膨胀将目标点融合到背景中，向外部扩展，腐蚀与膨胀意义相反，消除连通的边界，使边界向内收缩。- 目录1. 画布(canvas) 1.1 设置画布大小2. 画笔 2.1 画笔的状态 2.2 画笔的属性 2.3 绘图命令3. 命令详
- 一、生产者消费者模型介绍1.1 为什么需要使用生产者消费者模型生产者是指生产数据的任务，消费者是指消费数据的任务。当生产者的生产能力远大于消
- 之前对bottle做过不少的介绍，也写过一些文章来说明bottle的缺点，最近发现其实之前有些地方说的不太公平，所以趁此机会也来更正一下。&
- SQL JOIN 连接SQL JOIN 子句用于把来自两个或多个表的行结合起来，基于这些表之间的共同字段。最常见的 JOIN 类型：SQL
- 技巧之一：提高使用Request集合的效率 访问一个ASP集合来提取一个值是费时的、占用计算资源的过程。因为这个操作包含了一系列对相关集合的
- 本文实例讲述了Python基于回溯法子集树模板实现8皇后问题。分享给大家供大家参考，具体如下：问题8×8格的国际象棋上摆放八个皇后，使其不能
- console 打印乱码1.File Encoding设置项目编码为GBK2.文件模板设定python脚本为# -*- coding: ut
- 一、问题描述在windows下，time.Parse()的时区和time.Format()的时区是一致的。但是在linux环境下，time.
- Python中类似于PHP的数组的结构有list,tuple，dict和set， 其中list, tuple和set的类似于PHP的索引数组
- 本文实例讲述了Python基础之函数基本用法与进阶。分享给大家供大家参考，具体如下：目标函数参数和返回值的作用函数的返回值 进阶函数的参数
- 本文实例为大家分享了Golang实现断点续传的具体代码，供大家参考，具体内容如下1、将文件pic_src.jpg复制到pic_des.jpg
- 今天做visual transformer研究的时候，发现了einops这么个神兵利器，决定大肆安利一波。先看链接：https://gith
- 这篇文章主要介绍了如何通过python实现人脸识别验证,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋
- 本文实例讲述了JavaScript点击按钮后弹出透明浮动层的方法。分享给大家供大家参考。具体分析如下：这里实现点击后页面变灰色，并用JS弹出
- 第一种方案： 使用递归算法，也是使用频率最多的，大部分开源程序也是这么处理，不过一般都只用到四级分类。这种算法的数据库结构设计最为简单。ca
- 特殊情况有 * ^ : | . \一、单个符号作为分隔符String address="上海\上海市|闵行区\吴中路";
- 一、前言html和css的学习大致完成，我们进入重要的JavaScript学习阶段二、什么是JavaScript，有什么用?Javascri
