<!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语法编写一次代码...
在实现Tab切换时,通常会用到HTML、CSS和JavaScript。HTML用于构建基础结构,定义各个Tab和内容区域;CSS用于样式设置,使Tab和内容区域美观且布局合理;JavaScript则负责交互逻辑,监听用户的点击或滑动事件,并...
本文将详细讲解如何使用纯JavaScript实现Tab切换,以及与之相关的`select`选择器和`radio`单选按钮的切换。 首先,我们来理解Tab切换的基本概念。在HTML结构中,通常会有几个包含不同内容的`div`元素,它们被隐藏或...
简单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标签,实现内容区域的平滑横向切换,同时伴有选中框的动态移动效果,给人...
jQuery简化了DOM操作和事件处理,使得Tab切换的实现更加简洁。如果你使用jQuery,可以利用`.on()`方法绑定事件,`.removeClass()`和`.addClass()`切换样式,以及`.show()`和`.hide()`控制内容的可见性。 总的来说,...