基于javascript实现tab切换特效
作者：回忆没了焦点 发布时间：2024-02-24 12:31:58
标签：javascript,tab切换
本文实例为大家分享了javascript实现tab切换特效代码，供大家参考，具体内容如下
效果图：
实现代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="gb2312">
<title>实践题 - 选项卡</title>
<style type="text/css">
*{
margin:0px;
padding:0px;
}
#tab{
margin:10px;
}
#tab ul{
list-style:none;
height:36px;
border-bottom:2px solid black ;
display:block;
}
#tab ul li{
float:left;
display:inline-block;
padding:0px 15px;
height:34px;
line-height:34px;
margin-right:5px;
border:1px solid #ccc;
border-bottom:none;
cursor:pointer;
}
#tab div{
padding:5px;
border:1px solid #ccc;
border-top:none;
}
#tab ul li.on{
border-top:2px solid black;
border-bottom: 2px solid white;
}
.hide{
display:none;
}
</style>
<script type="text/javascript">
window.onload=function(){
var mytab =document.getElementById("tab");
var myul=mytab.getElementsByTagName("ul")[0];
var myli=myul.getElementsByTagName("li");
var mydiv=mytab.getElementsByTagName("div");
// alert(mydiv.length)
for(i=0,len=myli.length;i<len;i++){
myli[i].index=i;
myli[i].onclick=function(){
for(var n=0;n<len;n++){
myli[n].className="";
mydiv[n].className="hide";
}
this.className="on";
mydiv[this.index].className="";
}
}
}
</script>
</head>
<body>
<!-- HTML页面布局 -->
<div id="tab">
<ul>
<li class="on">房产</li>
<li>家居</li>
<li>二手房</li>
</ul>
<div>
275万购昌平邻铁三居 总价20万买一居
200万内购五环三居 140万安家东三环
北京首现零首付楼盘 53万购东5环50平
京楼盘直降5000 中信府 公园楼王现房
</div>
<div class="hide">
40平出租屋大改造 美少女的混搭小窝
经典清新简欧爱家 90平老房焕发新生
新中式的酷色温情 66平撞色活泼家居
瓷砖就像选好老婆 卫生间烟道的设计
</div>
<div class="hide">
通州豪华3居260万 二环稀缺2居250w甩
西3环通透2居290万 130万2居限量抢购
黄城根小学学区仅260万 121平70万抛!
独家别墅280万 苏州桥2居优惠价248万
</div>
</div>
</body>
</html>
0
投稿猜你喜欢
一、导入所需的库import turtleimport randomfrom math import *二、生成斐波那契数列斐波那契数列是指- 在上一篇文章中实现了树莓派下对摄像头的调用，有兴趣的可以看一下：python+opencv实现摄像头调用的方法接下来，我们将使用python
- 既然你选择了编程作为职业，就注定了要终生以计算机为伴。但这并不意味着你应该置自己的健康不顾。谁都知道，电脑面前待久了，一是伤害你的眼睛，而是
- auto_api_test开发环境: Pycharm开发语言&版本: python3.7.8测试框架: Pytest、测试报告: A
- 前言众所周知，Dataset和Dataloder是pytorch中进行数据载入的部件。必须将数据载入后，再进行深度学习模型的训练。在pyto
- 背景：使用python脚本传递参数在实际工作过程中还是比较常用，以下提供了好几种的实现方式：一、使用sys.argv的数组传入说明：使用sy
- 本篇文章主要是由于计划使用django写一个计划任务出来，可以定时的轮换值班人员名称或者定时执行脚本等功能，百度无数坑之后，终于可以凑合把这
- 大型网站为了软解大量的并发访问，除了在网站实现分布式负载均衡，远远不够。到了数据业务层、数据访问层，如果还是传统的数据结构，或者只是单单靠一
- python的正则是通过re模块的支持匹配的3个函数match ：只从字符串的开始与正则表达式匹配，匹配成功返回matchobject，否则
- 切片主要用于序列对象中，按照索引区间截取出一段索引的内容。切片的书写形式：[i : i+n : m] ；其中，i 是切片的起始索引值，为列表
- ⛳️ 本次反反爬实战案例背景本篇博客选择的案例是由 VX 好友提出，他希望有一篇博客能简单的介绍清楚下面这个问题。快速定位加密参数逻辑，快速
- 最近基于selenium写了一个python小工具,记录下学习记录,自己运行的环境是Ubuntu 14.04.4, Python 2.7,C
- 一、条件判断语句条件判断语句主要就三个关键字：if 、elif、else这三个关键字可以有多种不同的组合。1、单纯的if语句只有一个 if
- 本文为大家分享了Win中安装mysql的详细步骤，供大家参考，具体内容如下mysql下载目录选择免安装版“Windows (x86, 64-
- 目录序列容器序列与扁平序列不可变序列与可变序列列表推导生成器表达式Tips小结序列序列是指一组数据，按存放类型分为容器序列与扁平序列，按能否
- 本文主要是总结利用tensorflow实现迁移学习的基本步骤。所谓迁移学习，就是将上一个问题上训练好的模型通过简单的调整使其适用于一个新的问
- 什么是注意力机制注意力机制是一个非常有效的trick，注意力机制的实现方式有许多，我们一起来学习一 * 意力机制是深度学习常用的一个小技巧，它
- 线性插值插值：是根据已知的数据序列（可以理解为你坐标中一系列离散的点），找到其中的规律，然后根据找到的这个规律，来对其中尚未有数据记录的点进
- 直接将 视频的HTML网址存入models ,以字符串的形式#关于我们 CharFieldclass About(models.Model)
- 本文实例讲述了Python实现通过解析域名获取ip地址的方法。分享给大家供大家参考，具体如下：从网上查找的一些资料，特此做个笔记案例1：de
