<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
.slip{display:none}
.active{display:block}
.topItem{float:left; background:url(./images/jrw1_04.gif) no-repeat; width:77px; height:22px;line-height:22px;color:#2f82fb}
.top{height:21px; background-color:#ebf5fa; border:solid 1px #c3e1f0; border-bottom-width:0; padding-left:15px; padding-top:2px}
.top .active{background-image:url(./images/jrw1_03.gif);color:red}
</style>
</head>
<body>
<div style="width:512px; height:400px; font-size:12px;">
<div style="border:1px solid #9cb9e7; text-align:center; padding-bottom:2px;">
<div style="width:507px; padding-top:2px;">
<div class="top">
<div class="topItem active" onmouseover="showNext(0)">资讯</div>
<div class="topItem" onmouseover="showNext(1)">游戏</div>
<div class="topItem" onmouseover="showNext(2)">购物</div>
<div style="clear:both"></div>
</div>
<div style="border-left:solid 1px #aaddff; border-right:solid 1px #aaddff; border-bottom:solid 1px #aaddff; padding-top:10px;" class="slip active">
the first 资讯
<div style="clear:both"></div>
</div>
<div style="border-left:solid 1px #aaddff; border-right:solid 1px #aaddff; border-bottom:solid 1px #aaddff; padding-top:10px;" class="slip">
中间
<div style="clear:both"></div>
</div>
<div style="border-left:solid 1px #aaddff; border-right:solid 1px #aaddff; border-bottom:solid 1px #aaddff; padding-top:10px;" class="slip">
最后
<div style="clear:both"></div>
</div>
</div>
</div>
<div style="clear:both"></div>
</div>
<script type="text/javascript">
function showNext(index){
var slips=getElementsByClassName('slip');
var topItem=getElementsByClassName('topItem');
activeItem(topItem,index);
activeItem(slips,index);
}
function activeItem(elementArray,index){
if(elementArray[index].className.indexOf("active")==-1){
elementArray[index].className+=" active";
}
for(var i=0;i<elementArray.length;i++){
if(i!=index){
removeClassName(elementArray[i],'active')
}
}
}
function removeClassName(element,classname){
var theClassName;
do{
theClassName=element.className;
element.className=theClassName.replace(classname, " ")
}while(theClassName.indexOf(classname)>=0);
}
function getElementsByClassName(className, parentElement){
var elems = (parentElement||document.body).getElementsByTagName("*");
var result=[];
for (i=0; j=elems[i]; i++){
if ((" "+j.className+" ").indexOf(" "+className+" ")!=-1){
result.push(j);
}
}
return result;
}
</script>
</body>
</html>
分享到：
相关推荐
本示例将探讨如何利用jQuery实现一个基本的Tab切换功能，这对于创建交互式用户界面至关重要。 首先，我们需要理解Tab切换的基本原理。Tab切换通常涉及一组隐藏或显示的内容区域，每个区域对应一个可点击的Tab按钮。...
两个简单tab切换 可用 适合新手学习
总的来说，`RadioGroup`和`Button`都能有效地实现安卓首页Tab切换功能，但前者更适用于简单的Tab切换场景，而后者则允许更灵活的定制和交互设计。开发者可以根据实际需求和项目规模选择合适的方法。
在Asp.net 2.0框架中，开发一个简易的菜单Tab切换功能是常见的需求，尤其对于构建用户界面友好、交互性强的Web应用程序至关重要。Tab控件能够帮助用户更好地组织和浏览网页上的信息，提高用户体验。下面我们将深入...
这个“wpf tab切换--contentControl demo”提供了一个简单的示例，帮助开发者更好地理解和应用TabControl与ContentControl的交互。 **TabControl基础** TabControl由一系列TabItems组成，每个TabItem包含一个标题...
例如，如果你有两个`QLineEdit`对象，`lineEdit1`和`lineEdit2`，你可以这样设置它们的Tab切换顺序： ```cpp setTabOrder(lineEdit1, lineEdit2); ``` 这样，当用户按下Tab键时，焦点会从`lineEdit1`转移到`...
总之，jQuery使得创建功能丰富的Tab切换插件变得简单易行。通过对事件处理、DOM操作和动画的巧妙运用，我们可以构建出具有吸引力且用户友好的界面组件。无论是在企业级应用还是个人项目中，这样的插件都是提升网站...
"JS简单实用的网页TAB切换效果"这个主题，就是关于如何利用JavaScript实现这种功能的一个教程。在这个项目中，我们将探讨如何通过HTML结构、CSS样式以及JavaScript脚本来创建一个简单的TAB切换系统。 首先，HTML是...
本教程将介绍一个经典且简单的Tab切换实现，适合初学者学习，同时也适用于有一定经验的开发者寻找可以直接使用的代码模板。 首先，Tab切换的基本原理是通过HTML结构、CSS样式和JavaScript来实现。在HTML中，我们...
本篇文章将深入讲解“非常简单的tab切换”这一主题，适合初学者或者对UI设计感兴趣的开发者。 首先，我们要理解什么是Tab切换。在网页或应用程序中，Tab切换通常表现为一组可以点击的标签，每个标签对应一个独立的...
以下是一个简单的Tab切换实现步骤： 1. 创建HTML结构，包括Tab按钮和内容区域，每个Tab按钮对应一个内容区域。 2. 使用CSS3选择器为Tab按钮添加默认样式和激活状态样式。 3. 利用Flexbox布局将Tab按钮水平排列。 4....
在网页设计中，用户体验是至关重要的，而"鼠标滑动tab切换"是一种常见的交互效果，它使得用户可以通过鼠标滑动来轻松浏览和切换不同的内容区域，例如产品介绍、服务详情等。这种效果大大提升了用户的浏览体验，使得...
通过简单的配置，开发者可以在短时间内为应用增添专业且美观的Tab切换指示器，提升用户体验。在实际开发中，根据具体需求，还可以对`EasyIndicator`进行更深入的定制，比如调整动画时长、指示器的大小等，以达到最佳...
在IT界，Tab切换栏是一种常见的用户界面（UI）元素，用于在有限的空间内展示多个视图或功能区域。Tab控件允许用户通过点击不同的标签来切换内容，从而提高交互性和用户体验。在“tab切换栏.rar”这个压缩包中，可能...
2. 触摸事件优化：处理触摸事件时，防止滚动事件的默认行为（`e.preventDefault()`），以确保只有Tab切换而不会触发页面滚动。 3. 响应式设计：确保滑动切换在不同屏幕尺寸和设备上都能良好工作，可能需要调整Tab...
简单的横向JS菜单TAB切换，无需调用JQUERY，支持所有浏览器。
这个简单的 JavaScript 实现依赖于元素的索引和类名的管理，使得用户可以通过点击 Tab 标签轻松切换页面内容。这种功能在很多网页应用中都很常见，例如产品介绍、用户设置、数据统计等场景。 总的来说，这个示例...
在本示例中，我们将探讨如何使用JavaScript实现一个基本的Tab切换效果，这是一种常见的用户界面设计元素，用于在有限的空间内展示多个视图或内容板块。 首先，我们需要创建HTML结构来定义Tab导航和对应的内容区域。...
在前端开发中，"tab切换"是一种常见的交互设计模式，用于在有限的空间内展示多个相关的但互斥的内容区域。用户可以通过点击不同的标签来切换显示的内容。"tab切换html代码"通常涉及HTML、CSS和JavaScript（或者...
在网页设计中，Tab切换效果是一种常见的交互设计模式，它允许用户通过点击不同的标签来切换显示不同的内容区域。本教程将详细介绍如何仅使用HTML和CSS技术实现这种效果，无需依赖JavaScript进行动态控制。 首先，...