<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>菜单</title>
<style type="text/css">
*{
margin:0;
padding:0;
list-style:none;
font-size:12px;
}
.tab{
width:298px;
height:98px;
margin:10px;
border:1px solid #eee;
overflow:hidden;
}
.tab_title{
height:27px;
position:relative;
background:#f7f7f7;
}
.tab_title ul{
position:absolute;
width:301px;
left:-1;
}
.tab_title li{
float:left;
width:58px;
height:26px;
line-height:26px;
text-align:center;
padding:0 1px;
border-bottom:1px solid #eee;
overflow:hidden;
}
.tab li a:link,.tab li a:visited{
text-decoration:none;
color:#000;
}
.tab li a:hover{
color:#f90;
font-weight:700;
}
.tab_title li.select{
background:#fff;
border-botton-color:#fff;
border-left:1px solid #eee;
border-right:1px solid #eee;
padding:0;
}
.tab .tab_content .tabct{
margin:10px 10px 10px 19px;
}
.tab .tab_content .tabct ul li{
float:left;
width:134px;
height:25px;
overflow:hidden;
}
</style>
<script type="text/javascript">
function $(id){
return typeof id=="string"?document.getElementById(id):id;
}
window.onload = function(){
var titleName = $("tab_title").getElementsByTagName("li");
var tabContent = $("tab_content").getElementsByTagName("div");
if(titleName.length != tabContent.length){
return;
}
for(var i=0;i<titleName.length;i++){
titleName[i].id = i;
titleName[i].onmouseover = function(){
for(var j = 0;j<titleName.length;j++){
titleName[j].className="";
tabContent[j].style.display="none";
}
this.className = "select";
tabContent[this.id].style.display="block";
}
}
}
</script>
</head>
<body>
<div class="tab" id="tab">
<div class="tab_title" id="tab_title">
<ul>
<li class="select">
<a href="">公告</a>
</li>
<li>
<a href="">规则</a>
</li>
<li>
<a href="">论坛</a>
</li>
<li>
<a href="">安全</a>
</li>
<li>
<a href="">工艺</a>
</li>
</ul>
</div>
<div class="tab_content" id="tab_content">
<div class="tabct" style="display:block">
<ul>
<li>
<a href="" >马云台大激励青年创业0</a>
</li>
<li>
<a href="">阿里给每个县长配智库</a>
</li>
<li>
<a href="">2014电商品牌口碑报告</a>
</li>
<li>
<a href="">三八节阿里系福利驾到</a>
</li>
</ul>
</div>
<div class="tabct" style="display:none">
<ul>
<li>
<a href="">马云台大激励青年创业1</a>
</li>
<li>
<a href="">阿里给每个县长配智库</a>
</li>
<li>
<a href="">2014电商品牌口碑报告</a>
</li>
<li>
<a href="">三八节阿里系福利驾到</a>
</li>
</ul>
</div>
<div class="tabct" style="display:none">
<ul>
<li>
<a href="">马云台大激励青年创业2</a>
</li>
<li>
<a href="">阿里给每个县长配智库</a>
</li>
<li>
<a href="">2014电商品牌口碑报告</a>
</li>
<li>
<a href="">三八节阿里系福利驾到</a>
</li>
</ul>
</div>
<div class="tabct" style="display:none">
<ul>
<li>
<a href="">马云台大激励青年创业3</a>
</li>
<li>
<a href="">阿里给每个县长配智库</a>
</li>
<li>
<a href="">2014电商品牌口碑报告</a>
</li>
<li>
<a href="">三八节阿里系福利驾到</a>
</li>
</ul>
</div>
<div class="tabct" style="display:none">
<ul>
<li>
<a href="">马云台大激励青年创业4</a>
</li>
<li>
<a href="">阿里给每个县长配智库</a>
</li>
<li>
<a href="">2014电商品牌口碑报告</a>
</li>
<li>
<a href="">三八节阿里系福利驾到</a>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
相关推荐
Javascript—Tab切换
纯CSS实现的TAB切换是一种常见的网页交互设计，它允许用户在不同的内容区域之间进行无JavaScript的导航。在本文中，我们将深入探讨纯CSS TAB切换的工作原理、关键样式以及如何实现这样的功能。 首先，理解TAB切换的...
纯CSS实现的Tab切换效果尤其受到欢迎，因为它无需JavaScript，减少了代码依赖，提高了页面性能。在这个“纯css tab切换效果（改进版）”中，我们将探讨如何使用CSS来创建一个功能完善且视觉吸引人的Tab切换组件。 ...
JavaScript 实现的 Tab 切换效果是一种常见的网页交互设计，用于在不同的内容区域之间进行切换，通常用在页面顶部或侧边的导航菜单。在这个例子中，我们将详细讲解如何使用 JavaScript 和 CSS 实现这一功能。 首先...
JavaScript Tab切换是一种常见的网页交互设计，它允许用户在多个内容区域之间轻松切换，而无需页面刷新。这种技术常用于展示产品特性、用户评论、服务介绍等。本文将深入讲解如何使用JavaScript实现简单、易用的Tab...
7. **响应式设计**：考虑到不同设备和屏幕尺寸，纯CSS Tab切换可能还包含媒体查询（`@media`），以便在移动设备上优化显示。 通过这个项目，开发者不仅可以学习到如何用纯CSS实现Tab标签切换，还能深入了解CSS的...
在网页设计中，Tab切换效果是一种常见的交互设计模式，它允许用户通过点击不同的标签来切换显示不同的内容区域。...然而，对于更复杂的交互需求，你可能还需要学习如何结合JavaScript来增强Tab切换的功能性和用户体验。
在本文中，我们将深入探讨如何使用纯CSS3实现Tab标签切换效果。Tab切换是一种常见的用户界面设计...通过掌握这些技巧，开发者可以在不依赖JavaScript的情况下创建出响应式的Tab切换组件，提升网站或应用的用户体验。
最后，为了实现Tab切换的动画效果，可以使用CSS过渡或者JavaScript的setTimeout函数，使内容的显示和隐藏更加平滑。 总结起来，使用JavaScript设计Tab标签切换涉及到以下几个关键点： 1. 获取Tab和内容元素。 2. ...
本示例是使用纯JavaScript实现的Tab切换功能，这在不依赖任何JavaScript库或框架如jQuery的情况下尤其有用。下面我们将深入探讨这个主题，讲解如何实现纯JavaScript的Tab切换效果。 首先，我们需要理解HTML结构。一...
本教程将重点讲解如何利用这三种技术实现tab切换的选项卡功能。 1. **HTML 结构**： 首先，我们需要创建一个包含多个`div`的结构，每个`div`代表一个选项卡的内容。通常，我们会有一个父级`div`作为容器，每个选项...
【uniapp 顶部tab切换菜单】是基于uniAPP框架实现的一种常见的用户界面元素，它用于在多个视图间进行切换，常应用于移动应用或Web应用的顶部导航。uniAPP是一个多端开发框架，允许开发者使用Vue.js语法编写一次代码...
本文将详细讲解如何使用纯JavaScript实现Tab切换，以及与之相关的`select`选择器和`radio`单选按钮的切换。 首先，我们来理解Tab切换的基本概念。在HTML结构中，通常会有几个包含不同内容的`div`元素，它们被隐藏或...
在实现Tab切换时，通常会用到HTML、CSS和JavaScript。HTML用于构建基础结构，定义各个Tab和内容区域；CSS用于样式设置，使Tab和内容区域美观且布局合理；JavaScript则负责交互逻辑，监听用户的点击或滑动事件，并...
简单JavaScript Tab切换源码下载。兼容IE8以及各种主流浏览器
Tab切换的基本原理是利用JavaScript或者CSS（例如CSS3的`:target`伪类）来控制不同内容块的显示与隐藏。通常，每个标签对应一个内容区，点击标签时，改变内容区的显示状态，达到切换效果。在HTML结构中，每个标签和...
在tab切换效果中，需要通过DOM操作来隐藏或显示相应的内容区域，如切换不同的div块。 2. 事件处理：JavaScript通过事件监听来响应用户的交互行为，例如点击按钮或链接。在tab切换效果中，通常会为每个tab按钮添加...
"Tab切换4个不同页面"的实现通常涉及到前端开发，尤其是HTML、CSS和JavaScript的运用。在这个场景中，我们有三个关键文件：`index.css`、`index.jsp`和`pages`目录。 1. **index.css**：这是一个CSS（层叠样式表）...
在本项目中，"tab切换h5动画效果源码"是一个使用HTML5、CSS3和JavaScript实现的交互式用户界面组件。这个组件的核心功能是通过点击不同的tab标签，实现内容区域的平滑横向切换，同时伴有选中框的动态移动效果，给人...
在网页设计中，Tab切换是一种常见的用户界面元素，它允许用户在不同的内容面板间进行切换，而无需加载新的页面。这种交互方式提高了用户体验，减少了页面的混乱感。本篇文章将详细探讨基于jQuery编写的Tab切换插件，...