用JavaScrip实现选项卡切换的效果

2024-01-29 14:18

本文主要是介绍用JavaScrip实现选项卡切换的效果,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title>实践题 - 选项卡</title><style type="text/css">/* CSS样式制作 */ *{padding:0px;margin:0px;font:12px normal "moicrosoft yahei";}#tabs {width:290px;height:150px;padding:5px;margin:20px;;}#tabs ul {list-style:none;display:block;height:30px;line-height:30px;border-bottom:2px saddlebrown solid;}#tabs ul li{background:#fff;display:inline-block;cursor:pointer;float:left;width:60px;height:28px;margin:0px;border:1px solid #aaaaaa;border-bottom:none;list-style:none;line-height:;text-align:center;}#tabs ul li.on{border-top:2px solid saddlebrown;border-bottom:2px solid #fff;}#tabs div{padding:5px;border:1px solid #336699;height:120px;line-height:25px;}.hide{display:none;}</style><script type="text/javascript">  // JS实现选项卡切换window.οnlοad=function(){var oTab=document.getElementById("tabs");var oUl=oTab.getElementsByTagName("ul")[0];var oLis=oUl.getElementsByTagName("li");var oDivs=oTab.getElementsByTagName("div");for(var i=0;i<oLis.length;i++){oLis[i].index=i;oLis[i].onclick = function(){for(var i=0;i<oLis.length;i++){oLis[i].className="";oDivs[i].className="hide";}this.className="on";oDivs[this.index].className="";}};}</script></head>
<body>
<!-- HTML页面布局 -->
<div id="tabs">
<ul><li class="on">房产</li><li>家居</li><li>二手房</li>
</ul><div>275万购昌平邻铁三居 总价20万买一居<br>200万内购五环三居 140万安家东三环<br>北京首现零首付楼盘 53万购东5环50平<br>京楼盘直降5000 中信府 公园楼王现房<br></div><div class="hide">0平出租屋大改造 美少女的混搭小窝<br>经典清新简欧爱家 90平老房焕发新生<br>新中式的酷色温情 66平撞色活泼家居<br>瓷砖就像选好老婆 卫生间烟道的设计<br></div><div  class="hide">通州豪华3居260万 二环稀缺2居250w甩<br>西3环通透2居290万 130万2居限量抢购<br>黄城根小学学区仅260万 121平70万抛!<br>独家别墅280万 苏州桥2居优惠价248万<br></div>
</div></body>
</html>

这篇关于用JavaScrip实现选项卡切换的效果的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/657195

相关文章

Java+AI驱动实现PDF文件数据提取与解析

《Java+AI驱动实现PDF文件数据提取与解析》本文将和大家分享一套基于AI的体检报告智能评估方案,详细介绍从PDF上传、内容提取到AI分析、数据存储的全流程自动化实现方法,感兴趣的可以了解下... 目录一、核心流程:从上传到评估的完整链路二、第一步:解析 PDF,提取体检报告内容1. 引入依赖2. 封装

使用Spring Cache本地缓存示例代码

《使用SpringCache本地缓存示例代码》缓存是提高应用程序性能的重要手段,通过将频繁访问的数据存储在内存中,可以减少数据库访问次数,从而加速数据读取,:本文主要介绍使用SpringCac... 目录一、Spring Cache简介核心特点:二、基础配置1. 添加依赖2. 启用缓存3. 缓存配置方案方案

Java实现复杂查询优化的7个技巧小结

《Java实现复杂查询优化的7个技巧小结》在Java项目中,复杂查询是开发者面临的“硬骨头”,本文将通过7个实战技巧,结合代码示例和性能对比,手把手教你如何让复杂查询变得优雅,大家可以根据需求进行选择... 目录一、复杂查询的痛点:为何你的代码“又臭又长”1.1冗余变量与中间状态1.2重复查询与性能陷阱1.

深度剖析SpringBoot日志性能提升的原因与解决

《深度剖析SpringBoot日志性能提升的原因与解决》日志记录本该是辅助工具,却为何成了性能瓶颈,SpringBoot如何用代码彻底破解日志导致的高延迟问题,感兴趣的小伙伴可以跟随小编一起学习一下... 目录前言第一章:日志性能陷阱的底层原理1.1 日志级别的“双刃剑”效应1.2 同步日志的“吞吐量杀手”

python 线程池顺序执行的方法实现

《python线程池顺序执行的方法实现》在Python中,线程池默认是并发执行任务的,但若需要实现任务的顺序执行,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋... 目录方案一:强制单线程(伪顺序执行)方案二:按提交顺序获取结果方案三:任务间依赖控制方案四:队列顺序消

Spring创建Bean的八种主要方式详解

《Spring创建Bean的八种主要方式详解》Spring(尤其是SpringBoot)提供了多种方式来让容器创建和管理Bean,@Component、@Configuration+@Bean、@En... 目录引言一、Spring 创建 Bean 的 8 种主要方式1. @Component 及其衍生注解

SpringBoot通过main方法启动web项目实践

《SpringBoot通过main方法启动web项目实践》SpringBoot通过SpringApplication.run()启动Web项目,自动推断应用类型,加载初始化器与监听器,配置Spring... 目录1. 启动入口:SpringApplication.run()2. SpringApplicat

Redis实现分布式锁全过程

《Redis实现分布式锁全过程》文章介绍Redis实现分布式锁的方法,包括使用SETNX和EXPIRE命令确保互斥性与防死锁,Redisson客户端提供的便捷接口,以及Redlock算法通过多节点共识... 目录Redis实现分布式锁1. 分布式锁的基本原理2. 使用 Redis 实现分布式锁2.1 获取锁

Java利用@SneakyThrows注解提升异常处理效率详解

《Java利用@SneakyThrows注解提升异常处理效率详解》这篇文章将深度剖析@SneakyThrows的原理,用法,适用场景以及隐藏的陷阱,看看它如何让Java异常处理效率飙升50%,感兴趣的... 目录前言一、检查型异常的“诅咒”:为什么Java开发者讨厌它1.1 检查型异常的痛点1.2 为什么说

Linux实现查看某一端口是否开放

《Linux实现查看某一端口是否开放》文章介绍了三种检查端口6379是否开放的方法:通过lsof查看进程占用,用netstat区分TCP/UDP监听状态,以及用telnet测试远程连接可达性... 目录1、使用lsof 命令来查看端口是否开放2、使用netstat 命令来查看端口是否开放3、使用telnet