<head>
<title>无标题文档</title>
<style>
* {list-style-type:none; font-size:12px; text-decoration:none; margin:0; padding:0;}
.tab{ margin:20px; width:244px; height:200px; overflow:hidden; border:1px #AACCEE solid;}
.tab_b{ overflow:hidden; margin:5px; }
.menu {overflow:hidden; }
.menu li{ display:block; float:left; display: list-item; text-align:center; width:60px; background-color:#EDF4FC;line-height:20px; border-bottom:1px #AACCEE solid;border-right:1px #AACCEE solid; }
.menu li a{ display:block;}
.menu_d{border-bottom:1px #FFFFFF solid;background-color:#FFFFFF; }
.tab ul li.aaa
{
background:#FF0000;
}
</style>
</head>
<body>
<script language="javascript">
function tabs(n)
{
var len = 4;
for (var i = 1; i <= len; i++)
{
document.getElementById('tab_a' + i).style.display = (i == n) ? 'block' : 'none';
document.getElementById('tab_' + i).className = (i == n) ? 'aaa' : 'none';
}
}
var timeout;
function delayChangeTab(m, n)
{
tabs(m );
//timeout = setTimeout('tabs(' + m + ')', n);
}
function cancelChangeTab()
{
clearTimeout(timeout);
}
</script>
<div class="tab">
<ul class="menu" id="menutitle">
<li id="tab_1" class="aaa"><a href="javascript:void(0)" onmouseover="delayChangeTab('1',500);" onmouseout="cancelChangeTab();">新闻</a></li>
<li id="tab_2" ><a href="javascript:void(0)" onmouseover="delayChangeTab('2',500);" onmouseout="cancelChangeTab();">生活</a></li>
<li id="tab_3" ><a href="javascript:void(0)" onmouseover="delayChangeTab('3',500);" onmouseout="cancelChangeTab();">家居</a></li>
<li id="tab_4" ><a href="javascript:void(0)" onmouseover="delayChangeTab('4',500);" onmouseout="cancelChangeTab();">旅游</a></li>
</ul>
<div class="tab_b" id="tab_a1" style="display:block;"> 本地国内国际新闻<br />新浪</div>
<div class="tab_b" id="tab_a2" style="display:none;">网易 本土生活</div>
<div class="tab_b" id="tab_a3" style="display:none;">舒适居家房地产信息</div>
<div class="tab_b" id="tab_a4" style="display:none;">出行 度假</div>
</div>
</body>
分享到：
相关推荐
本示例着重关注的是“jQuery JS Tab效果”，这是一种常见的网页设计元素，用于展示分段的内容，提高用户体验。Tab效果允许用户在多个面板之间切换，每个面板包含不同的信息或功能，而无需刷新整个页面。 首先，...
JavaScript 实现的 Tab 切换效果是一种常见的网页交互设计，用于在不同的内容区域之间进行切换，通常用在页面顶部或侧边的导航菜单。在这个例子中，我们将详细讲解如何使用 JavaScript 和 CSS 实现这一功能。 首先...
JavaScript（简称JS）是一种轻量级的解释型编程语言，广泛应用于网页和网络应用开发，尤其在实现前端交互效果方面有着不可替代的作用。在给定的"JS TAB切换 多个效果的源码"主题中，我们将深入探讨如何使用JS实现...
### js Tab效果代码增强版详解 #### 一、概述 本文档将详细介绍一款兼容IE与Firefox浏览器的增强版JS Tab效果代码。此代码不仅能够实现常见的Tab切换功能，还优化了样式并增强了交互体验，使其在不同的浏览器环境...
NULL 博文链接：https://xiaoa7.iteye.com/blog/280907
自动滑动TAB效果.rar自动滑动TAB效果.rar自动滑动TAB效果.rar自动滑动TAB效果.rar自动滑动TAB效果.rar自动滑动TAB效果.rar自动滑动TAB效果.rar自动滑动TAB效果.rar自动滑动TAB效果.rar自动滑动TAB效果.rar自动滑动...
总的来说，“仿浏览器Tab效果实现”涉及到的知识点包括：HTML结构设计、CSS样式控制、JavaScript/jQuery交互实现、以及前后端分离的开发模式。理解并掌握这些技能，对于提升Web应用的用户体验和开发效率具有重要意义...
综上所述，"前端各种Tab效果"涉及到前端开发中的HTML布局、CSS样式、JavaScript交互、响应式设计、框架组件、动画效果以及无障碍访问等多个方面，是前端开发中的重要知识点。通过熟练掌握这些技能，开发者能够创建出...
在JavaScript（简称js）的帮助下，我们可以轻松实现这种动态切换效果，提高用户体验并有效组织页面信息。以下是对这个话题的详细解释。 1. **HTML基础结构**： 首先，我们需要在HTML中创建一个包含导航标题和内容...
在本文中，我们将深入探讨如何使用JavaScript库JQuery来实现一个经典的Tab标签切换效果。Tab切换效果是网页设计中常用的一种交互元素，它允许用户在不同的内容区域之间轻松导航，而无需加载新的页面。让我们逐步解析...
`AveIcon.jpg`和`FlashCatcher.jpg`可能是用于Tab样式的图片资源，而`SWFDecompiler_icon.jpg`可能与解构Flash文件有关，但在这个JavaScript和CSS的Tab效果中并不直接相关。 总的来说，通过结合JavaScript的事件...
5. **动画效果**：不规则的Tab效果可能包含动画过渡，这需要用到JavaScript的定时器（如`setTimeout`或`requestAnimationFrame`）来控制元素的渐显渐隐、平移或其他动态效果。 6. **封装与模块化**：为了提高代码的...
JavaScript（简称JS）是一种广泛用于网页和网络应用的编程语言，尤其在客户端脚本中扮演着重要角色。本文将深入探讨如何使用JavaScript实现浏览器标签页的关闭功能，这对于提升用户体验和网页交互性具有重要意义。 ...
综上所述，"tab效果图文件"可能包含了用于展示和测试各种tab设计样式的图片或原型文件。这些文件可能涵盖了不同主题、布局、颜色方案和交互效果，帮助设计师和开发者创造出满足用户需求的高效且美观的tab界面。在...
这个"纯js多重嵌套tab切换效果"项目显然旨在教你如何使用纯JavaScript实现一个功能丰富的多层嵌套Tab切换效果，而无需依赖任何外部库如jQuery。这种效果能够使用户界面更加整洁且易于导航，尤其是在展示大量分类信息...
"js_tab"和"html_tab"则表明了这个示例主要关注的是HTML和JavaScript的结合应用。这个压缩包文件的名称暗示了它包含一个HTML文件和相关的JavaScript代码，可能还有CSS样式，用于展示如何实现动态Tab组件。 总的来说...
JavaScript实现Tab效果的知识点涉及到了HTML、CSS以及JavaScript的综合应用。从给定的文件内容中，我们可以提炼出以下的知识点： 1. **HTML结构**： - 首先需要一个包含所有tab按钮的容器，这个容器通常是一个表格...
"JS简单实用的网页TAB切换效果"这个主题，就是关于如何利用JavaScript实现这种功能的一个教程。在这个项目中，我们将探讨如何通过HTML结构、CSS样式以及JavaScript脚本来创建一个简单的TAB切换系统。 首先，HTML是...
JavaScript（简称JS）是一种广泛用于网页和网络应用的编程语言，尤其在前端开发中扮演着重要角色。在网页设计中，Tab标签页是一种常见的交互元素，它能够有效地组织和展示大量信息，提高用户体验。本篇将深入探讨...
综上所述，“TAB效果”是一种常见的用户界面设计模式，涉及到前端开发中的HTML、CSS和JavaScript技术，以及响应式设计和无障碍性原则。实现良好的TAB效果不仅关乎美观，更关乎用户体验和可访问性。在实际项目中，...