基于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
投稿猜你喜欢
- 信息安全的核心就是数据库的安全，也就是说数据库加密是信息安全的核心问题。数据库数据的安全问题越来越受到重视，数据库加密技术的应用极大的解决了
- 为了更好的说明问题，首先引出下面的题目//请说明下面变量 a-d 的值 var a = [[1][1]]; var b = [['a
- 本文实例为大家分享了Python 12306抢火车票的具体代码，供大家参考，具体内容如下# -*- coding: utf-8 -*-fro
- 一、前言写这篇文章的灵感来源于我玩游戏的时候（为了避免过不了审就不说是啥游戏了），看见一个大佬在游戏里面建造了“还原方阵
工欲善其事，必先利其器，开发工具这个东西觉得折腾下还是有好处的。但常常感觉专门抽出时间搞这个浪费时间，更常见的现象是已经明显感觉到当前的开发- 前言本博客重点：folium的使用功能，图层控制、指北针、folium添加js和css、经纬网格线（栅格线）在上一篇使用folium制作地图
- Yahoo和Google都有自己的建设高性能网站最佳实践, 我不做赘述, 需要了解的自行查阅资料:Yahoo的: Best Practice
- 代码：import sys # 导入系统模块获得cmd的参数import tracebackdef TEST(params):
- MySQL常用的四种引擎的介绍（1）：MyISAM存储引擎：不支持事务、也不支持外键，优势是访问速度快，对事务完整性没有 要求或者以sele
- 在opencv中，特征检测、描述、匹配都有集成的函数。vector<DMatch> bestMatches;用来存储得到的匹配点
- 目前搜索到的方法有：np.where(‘元素')还有就是pandas的方法：df.index(‘元素')但是第二个方法的问题
- 一、简介 多线程编程技术可以实现代码并行性，优化处理能力，同时功能的
- pytorch读取图像数据转成opencv格式方法：先转成numpy通用的格式，再将其转换成opencv格式。pytorch读取的数据使用l
- 实例代码：import tkinter as tk import tkinter.filedialogimport cv2def choos
- 在我做过的N多项目中，基本都有个跑不开的怪圈——首页很难设计。根据进度安排，首页必须按时出来，不然没法review，也没法测试。于是，首页只
- 0x00 环境系统环境:win10编写工具:JetBrains PyCharm Community Edition 2017.1.2 x64
- 一直以来，Web 字体背着单调的恶名，因为想在网页上显示一种字体，该字体文件本身必须存在于用户的电脑中，由于这个限制，加上 Web 用户可能
- 看代码~from django.contrib import messages messages.info(request, '要显
- 下面是一段产生log-normal分布的代码，以此进行说明。clear all;clc;for t=1:100 Traffic(t) =cu
- 记得有一期ucdchina书友会里面，聊过一次大家的工作习惯问题，现在回想起来很有意思，特整理这篇文章分享给大家。关于photoshop1
