javascript tab 实例代码【原创】

最新推荐文章于 2024-07-28 08:45:00 发布
最新推荐文章于 2024-07-28 08:45:00 发布
阅读量86 收藏
点赞数
分类专栏： JavaScript+jquery+ajax 文章标签： JavaScript XHTML HTML ViewUI

盗用以前21cn同事开发的一个tab实例来分享啊哈哈~

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
* { margin:0; padding:0; border:0; list-style:none;}
body { font-size:12px; font-family:arial;}
ul { overflow:hidden; height:1%}
li { float:left; line-height:25px; padding:0 12px; text-transform:capitalize; cursor:pointer;}
li.on { background:#aaa; color:#fff}
</style>
</head>

<body>

<div id="tabs">
<ul>
<li class="on">james</li>
<li>anthony</li>
<li>bryant</li>
</ul>
<div style="height:100px; background:pink;"></div>
<div style="height:100px; background:green;"></div>
<div style="height:100px; background:orange;"></div>
</div>

<script>
function test(){
var timer = 400;
var obj = document.getElementById('tabs').getElementsByTagName('li');
var div = document.getElementById('tabs').getElementsByTagName('div')
for(var i=0; i<div.length; i++){
   if(i != 0){
   div[i].style.display = 'none'
   }
}
var len = obj.length;
for(var i=0; i<len; i++){
handler(obj[i],i)
}

function handler(list,index){
   list.onmouseover = function(){
   out = setTimeout(function(){
    tabs(index) },timer);
   }
   list.onmouseout = function(){
   clearTimeout(out)
   }
}


function tabs(index){
   for(var i=0; i<div.length; i++){
   var divs = div[i],objs = obj[i];
   if(i == index){
    divs.style.display = 'block'     
    objs.className = 'on'
   }
   else {
    divs.style.display = 'none';
    objs.className = ''
   }
   }
  
}

}
test()
</script>

</body>
</html>

 

iteye_5823
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
原生JS代码实现Tab切换
写写代码，慢慢进步
08-11 759
JS【原生】实现Tab切换效果
html5实现tab切换效果代码,HTML5实现Tab切换（通过js代码）
weixin_31855625的博客
06-03 1095
这篇文章给大家介绍的内容是关于HTML5实现Tab切换(通过js代码)，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。javascript实现Tab切换*{padding:0px;margin:0px;}ul li {cursor:pointer;float:left;width:100px;height:30px;line-height:30px;text-align:cente...
JavaScript 代码规范
lwx666sl的博客
06-04 816
所有的 JavaScript 项目适用同一种规范。代码规范通常包括以下几个方面:规范的代码可以更易于阅读与维护。代码规范一般在开发前规定，可以跟你的团队成员来协商设置。变量名推荐使用驼峰法来命名(camelCase): 空格与运算符 通常运算符 ( = + - * / ) 前后需要添加空格: 代码缩进 通常使用 4 个空格符号来缩进代码块： 不推荐使用 TAB 键来缩进，因为不同编辑器 TAB 键的解析不一样。简单语句的通用规则: 复杂语句的通用规则: 循环: 条件语句:
web前端 html+css+javascript网页设计实例 企业网站制作
热门推荐
weixin_44790790的博客
08-17 8万+
(案例源码链接在文章末尾，仅供学习参考) 一、在浏览器中的运行结果： 二、部分代码 1.HTML： <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>启乐官网</title> <link rel="stylesheet" href="style.css"/> <script src="myjs.j
javaScript实例：tab切换效果
敲代码不爱找bug的妹子
08-13 5897
我们平时经常会用到tab切换的效果，如下图：这个效果很常见，用js就可以实现。布局分析：我们可以先让其中的一块内容显示，其他的内容先隐藏，当用户点击头部标签时，可以让当前内容隐藏，点击部分的内容显示出来。通过改变标签样式就可以实现。html、css代码如下：<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <
javascript学习 - Chrome 中执行 JavaScript 代码
paofuluolijiang的博客
07-28 861
要在浏览器中执行JavaScript脚本，首先你的浏览器得支持。现在主流推荐Chrome浏览器，也可以使用基于Chromium的Edge浏览器。下面来介绍如何在Chrome中打开开发者工具，以及如何在开发者工具中运行调试JavaScript代码。以上就是今天的所有内容了，主要介绍了如何打开 Chrome 中的开发者工具，并且利用开发者工具如何来执行 JavaScript 脚本。
Javascript代码规范
f8152的博客
06-08 8285
1. 前言 JavaScript一直有着广泛的应用，特别是在浏览器端的行为管理。本文档的目标是使JavaScript代码风格保持一致，容易被理解和被维护。 虽然本文档是针对JavaScript设计的，但是在使用各种JavaScript的预编译语言时(如TypeScript等)时，适用的部分也应尽量遵循本文档的约定。 任何问题或建议，欢迎跟我们讨论 2. 代码风格
【JavaScript】面向对象的Tab栏分页切换案例
weixin_43790653的博客
03-16 1903
之前我们用原生js实现过Tab栏的分页切换效果，这是一种面向过程的方式，详见【JavaScript】自定义属性的应用案例——Tab栏分页切换，而今天我们来通过一种面向对象的方式来重新实现一下Tab栏分页切换。 两大编程思想： 面向过程 POP(Process-oriented programming)：分析出解决问题所需要的步骤，然后用函数把步骤按顺序实现。 面向对象 OOP(Object-oriented programming)：把事务分解成一个个对象，然后由对象之间分工合作。以对象功能来划分问题，而
Web前端：JavaScript最强总结 附详细代码 （带常用案例！）
BudingCode的博客
03-30 8万+
JavaScript 是脚本语言，是一种解释性脚本语言(代码不进行预编译)
JavaScript基础 - 经典案例3 - tab栏选项卡切换
never_stop_study的博客
09-19 908
JS案例 tab栏选项卡切换
JavaScript tab选项卡插件实例代码
10-22
在上面的代码中，我们创建了一个名为`H_tab`的构造函数，用于初始化我们的选项卡插件。这个插件接受一个元素和一个可选的配置对象作为参数。配置对象包含默认选中的选项卡索引（activeIndex）和过渡效果时间...
JavaScript 实现 Tab 点击切换实例代码
10-20
当对应的Tab标签被点击时，会通过JavaScript代码改变对应内容区域的display属性，将其从none变为block，从而显示对应的内容区域。 在JavaScript部分，我们通过document.getElementsByTagName方法获取所有的按钮和...
javascript禁用Tab键脚本实例
10-26
本文将深入讲解如何使用JavaScript来禁用Tab键，并提供一个实际的代码示例。 在HTML中，Tab键通常用于让用户在表单元素之间快速切换焦点。然而，有时为了防止用户意外离开当前输入区域或实现自定义的导航顺序，我们...
SQLAlchemy-2.0.31-cp38-cp38-musllinux_1_2_x86_64.whl
08-31
SQLAlchemy 是一个 SQL 工具包和对象关系映射（ORM）库，用于 Python 编程语言。它提供了一个高级的 SQL 工具和对象关系映射工具，允许开发者以 Python 类和对象的形式操作数据库，而无需编写大量的 SQL 语句。SQLAlchemy 建立在 DBAPI 之上，支持多种数据库后端，如 SQLite, MySQL, PostgreSQL 等。 SQLAlchemy 的核心功能： 对象关系映射（ORM）： SQLAlchemy 允许开发者使用 Python 类来表示数据库表，使用类的实例表示表中的行。 开发者可以定义类之间的关系（如一对多、多对多），SQLAlchemy 会自动处理这些关系在数据库中的映射。 通过 ORM，开发者可以像操作 Python 对象一样操作数据库，这大大简化了数据库操作的复杂性。 表达式语言： SQLAlchemy 提供了一个丰富的 SQL 表达式语言，允许开发者以 Python 表达式的方式编写复杂的 SQL 查询。 表达式语言提供了对 SQL 语句的灵活控制，同时保持了代码的可读性和可维护性。 数据库引擎和连接池： SQLAlchemy 支持多种数据库后端，并且为每种后端提供了对应的数据库引擎。 它还提供了连接池管理功能，以优化数据库连接的创建、使用和释放。 会话管理： SQLAlchemy 使用会话（Session）来管理对象的持久化状态。 会话提供了一个工作单元（unit of work）和身份映射（identity map）的概念，使得对象的状态管理和查询更加高效。 事件系统： SQLAlchemy 提供了一个事件系统，允许开发者在 ORM 的各个生命周期阶段插入自定义的钩子函数。 这使得开发者可以在对象加载、修改、删除等操作时执行额外的逻辑。
slim-0.7.0a1-py3-none-any.whl
08-31
whl软件包，直接pip install安装即可
lxml-5.0.1-cp310-cp310-win32.whl
最新发布
08-31
lxml 是一个用于 Python 的库，它提供了高效的 XML 和 HTML 解析以及搜索功能。它是基于 libxml2 和 libxslt 这两个强大的 C 语言库构建的，因此相比纯 Python 实现的解析器（如 xml.etree.ElementTree），lxml 在速度和功能上都更为强大。 主要特性 快速的解析和序列化：由于底层是 C 实现的，lxml 在解析和序列化 XML/HTML 文档时非常快速。 XPath 和 CSS 选择器：支持 XPath 和 CSS 选择器，这使得在文档中查找特定元素变得简单而强大。 清理和转换 HTML：lxml 提供了强大的工具来清理和转换不规范的 HTML，比如自动修正标签和属性。 ETree API：提供了类似于 ElementTree 的 API，但更加完善和强大。 命名空间支持：相比 ElementTree，lxml 对 XML 命名空间提供了更好的支持。
SQLAlchemy-2.0.31-cp38-cp38-musllinux_1_2_aarch64.whl
08-31
SQLAlchemy 是一个 SQL 工具包和对象关系映射（ORM）库，用于 Python 编程语言。它提供了一个高级的 SQL 工具和对象关系映射工具，允许开发者以 Python 类和对象的形式操作数据库，而无需编写大量的 SQL 语句。SQLAlchemy 建立在 DBAPI 之上，支持多种数据库后端，如 SQLite, MySQL, PostgreSQL 等。 SQLAlchemy 的核心功能： 对象关系映射（ORM）： SQLAlchemy 允许开发者使用 Python 类来表示数据库表，使用类的实例表示表中的行。 开发者可以定义类之间的关系（如一对多、多对多），SQLAlchemy 会自动处理这些关系在数据库中的映射。 通过 ORM，开发者可以像操作 Python 对象一样操作数据库，这大大简化了数据库操作的复杂性。 表达式语言： SQLAlchemy 提供了一个丰富的 SQL 表达式语言，允许开发者以 Python 表达式的方式编写复杂的 SQL 查询。 表达式语言提供了对 SQL 语句的灵活控制，同时保持了代码的可读性和可维护性。 数据库引擎和连接池： SQLAlchemy 支持多种数据库后端，并且为每种后端提供了对应的数据库引擎。 它还提供了连接池管理功能，以优化数据库连接的创建、使用和释放。 会话管理： SQLAlchemy 使用会话（Session）来管理对象的持久化状态。 会话提供了一个工作单元（unit of work）和身份映射（identity map）的概念，使得对象的状态管理和查询更加高效。 事件系统： SQLAlchemy 提供了一个事件系统，允许开发者在 ORM 的各个生命周期阶段插入自定义的钩子函数。 这使得开发者可以在对象加载、修改、删除等操作时执行额外的逻辑。
高清版计算机系统结构大题精讲视频讲义.pdf
08-31
计算机组成原理： 计算机的基本组成和功能 数据表示和运算（包括二进制、十六进制、ASCII码等） 指令集和指令周期 存储器层次结构（包括缓存、主存、辅存等） 输入输出系统 计算机体系结构： 体系结构的基本概念和设计原则 并行处理和并行算法 流水线技术 多核处理器和众核处理器 存储体系结构 操作系统： 操作系统的基本概念、功能和组成 进程管理和线程管理 存储管理（包括虚拟内存、分页、分段等） 文件系统 设备管理和I/O控制
常用芯片手册芯片资料ad652常用芯片手册芯片资料ad652
08-31
常用芯片手册芯片资料ad652常用芯片手册芯片资料ad652提取方式是百度网盘分享地址
javascript实现tab切换实例解析
"这篇资源主要介绍了如何使用JavaScript实现Tab切换效果，通过两个具体的实例来演示。第一个实例模仿了“中国人民大学”官网的Tab切换样式，背景为图片，展示了鼠标悬停在不同选项上的效果。文章提供了完整的HTML和...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值