盗用以前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>
分享到：
相关推荐
【标题】"tab实例"揭示的是一个网页设计中的常见组件——Tab导航的实现方式，它主要利用JavaScript（JS）和层叠样式表（CSS）来创建动态、交互式的用户界面。Tab导航是一种高效的页面组织方式，它允许用户在多个相关...
我们将深入讨论五个不同的jQuery iframe tab实例，每个实例都有其独特的特性和应用场景。 ### 实例一：基础iframe tab 这个基本实例展示了如何创建一个简单的tab系统，每个tab对应一个iframe，用于加载不同的网页...
JavaScript是一种广泛应用于网页和网络应用的编程语言，...而“javascript代码自动生成.htm”文件可能提供了关于如何利用这些概念和工具的具体指导，包括实例和教程，以帮助你更好地理解和实践JavaScript代码生成技术。
在"Javascript特效实例大全"中，我们将会探索40多个精彩的JavaScript特效，这些实例涵盖了从基础到高级的各种应用，旨在帮助开发者提升网站的用户体验和视觉吸引力。 1. 弹出窗口：弹出窗口是JavaScript中常见的...
在上面的代码中，我们创建了一个名为`H_tab`的构造函数，用于初始化我们的选项卡插件。这个插件接受一个元素和一个可选的配置对象作为参数。配置对象包含默认选中的选项卡索引（activeIndex）和过渡效果时间...
当对应的Tab标签被点击时，会通过JavaScript代码改变对应内容区域的display属性，将其从none变为block，从而显示对应的内容区域。 在JavaScript部分，我们通过document.getElementsByTagName方法获取所有的按钮和...
JavaScript部分在这个实例中没有给出，但通常会使用JavaScript或者jQuery来实现tab栏的切换功能。以下是一个简单的JavaScript实现方法： ```javascript document.addEventListener('DOMContentLoaded', function() ...
【压缩包子文件的文件名称列表】：由于未提供具体的文件名称，我们只能推测这些文件可能包括HTML、CSS和JavaScript代码，每个文件对应一个Tab滑动门的实例。这些文件可能是独立的HTML页面，包含了对应的CSS样式和...
同一页面多个Tab选项卡的嵌套显示实例是这种设计模式的一种进阶应用，它能够更好地管理复杂的网页结构。下面我们将详细探讨Tab选项卡的实现原理、设计原则以及如何创建嵌套的Tab选项卡。 一、Tab选项卡的实现原理 1...
7.2 回车实现Tab键功能 7.3 Ctrl+Enter提交数据 7.4 IE中屏蔽退格建（Back Space） 7.5 屏蔽键盘所有键 7.6 JavaScript捕获方向键 7.7 状态栏变化信息 7.8 状态栏的跑马灯效果 7.9 状态栏缩放文字 7.10 状态栏文字...
在这个"vue.js多种登录方式tab切换代码"项目中，我们主要关注的是如何使用Vue.js来实现用户界面的动态交互，特别是切换不同登录方式的Tab功能。 首先，Vue.js的核心在于其响应式数据绑定系统，它允许我们在Vue实例...
在这个“javascript 页签实例”中，我们将深入探讨如何使用JavaScript和CSS来创建一个美观且可扩展的页签系统。 首先，我们需要理解页签的基本结构。通常，页签由两部分组成：页签头（标签）和相应的内容区。页签头...
总的来说，"jQuery多个tab切换选项卡代码.zip"是一个实用的资源，它提供了关于如何使用jQuery实现动态选项卡切换的实例，对于初学者和有经验的开发者来说都是一个宝贵的参考资料。通过学习和实践这个例子，你可以...
在JS部分，你会看到类似以下的代码： ```javascript import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter) let Dyy = { template: `#DyyDay` } let Dey = { template: `#DeyDay` } let ...
标题提到的"很好的Tab导航实例"可能是一个展示优秀Tab导航设计或实现的例子。它可能包括各种设计技巧，如动态加载内容、平滑过渡效果、自定义图标等，为开发者提供参考和学习。 综上所述，Tab导航作为用户界面设计...
本文将深入讲解如何使用JavaScript来禁用Tab键，并提供一个实际的代码示例。 在HTML中，Tab键通常用于让用户在表单元素之间快速切换焦点。然而，有时为了防止用户意外离开当前输入区域或实现自定义的导航顺序，我们...
总之，“jQuery旅游相册Tab切换代码”是一个融合了前端核心技术的实例，通过深入研究和实践，不仅可以提升编程技能，还能增强对网页动态效果设计的理解，对于任何想要提升自己前端能力的人来说，都是一份宝贵的资源...
标题中的“最简单的tab切换实例代码”是指一种基础的网页交互设计，用于在多个内容区块之间切换显示。这种设计常见于导航菜单、设置面板等场景，用户点击不同的选项（tab），对应的内容区域会显示或隐藏，提供简洁的...