div+css实现tab切换
——我一直不太信任自己的记忆力,所以我把它们都写下来
为了方便你们查看,css和js写在同一个html文件里,先看效果吧
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; border:0; } body{ text-align: center; } ul{ list-style: none; } a{ text-decoration: none; color: #ff6666; font-family: Arial; } .tab-container{ width: 398px; height: 200px; border:1px #ffcccc solid; margin: 20px; position: relative; overflow: hidden; } /*tab-head begin*/ .tab-head{ width: 400px; height:30px; left:0; background: #ffcccc; position: absolute; left:-1px;//这里设置-1是为了li的border与最外层的border重合 } .tab-head li{ float:left; height: 29px; line-height: 29px; width: 78px; overflow: hidden; padding: 0 1px; border-bottom: 1px solid #ffcccc; background: #ffeeee; } li.select{ background: #fff; padding: 0; border-left: 1px solid #ffcccc; border-right: 1px solid #ffcccc; border-bottom: 1px solid #fff; } /*tab-head end tab-panel begin*/ .tab-panel{ position: relative; width: 100%; height: 85%; top: 15%; -webkit-transition:all 0.3s linear;//切换过渡效果 } .tab-panel section{ position: absolute; display: inline-block; width: 100%; height: 100%; } #panel-1{ left: 0; } #panel-2{ left: 100%; } #panel-3{ left: 200%; } #panel-4{ left: 300%; } #panel-5{ left: 400%; } </style> </head> <body> <div class="tab-container"> <ul class="tab-head"> <li id="1" class="select" onmouseover="$(this)"><a href="#">新闻</a></li> <li id="2" onmouseover="$(this)"><a href="#">规则</a></li> <li id="3" onmouseover="$(this)"><a href="#">须知</a></li> <li id="4" onmouseover="$(this)"><a href="#">趣闻</a></li> <li id="5" onmouseover="$(this)"><a href="#">关于</a></li> </ul> <div id="tab-panel" class="tab-panel"> <section id="panel-1"><p>这是panel-1</p></section> <section id="panel-2"><p>这是panel-2</p></section> <section id="panel-3"><p>这是panel-3</p></section> <section id="panel-4"><p>这是panel-4</p></section> <section id="panel-5"><p>这是panel-5</p></section> </div> </div> <script type="text/javascript"> function $(id){ var lis = document.getElementsByTagName('li'); for (var i = 0; i < lis.length; i++) { lis[i].setAttribute('class',''); }; id.setAttribute('class','select'); var ele = document.getElementById('tab-panel'); ele.style.left=-(id.id-1)+'00%'; } </script> </body> </html>
相关推荐
本教程将重点讲解如何利用这三种技术实现tab切换的选项卡功能。 1. **HTML 结构**: 首先,我们需要创建一个包含多个`div`的结构,每个`div`代表一个选项卡的内容。通常,我们会有一个父级`div`作为容器,每个选项...
5. 添加键盘快捷键支持,通过监听键盘事件,实现Tab切换。 总的来说,利用JS、Div和CSS结合,可以创建出响应式、动态的TAB菜单,提高网页的互动性和用户体验。这个主题的学习和实践对于前端开发者来说是非常有价值...
- 每个Tab作为一个单独的Div,可以通过JavaScript或CSS来切换其激活状态。 - 内容区Div根据Tab的切换,动态显示或隐藏相应的子内容区域。 4. **Tab菜单的交互实现**: - 通过JavaScript或jQuery实现Tab的点击...
4. **JavaScript 动态切换**:虽然可以通过纯 CSS 实现简单的 `Tab` 切换,但为了实现点击切换功能,我们需要使用 JavaScript。这里可以使用 `addEventListener` 监听点击事件,更新 `Tab` 的选中状态并显示对应的...
总结,jQuery+CSS实现的Tab切换效果结合了JavaScript的动态性和CSS的样式控制,能够提供优秀的用户体验。理解并掌握这一技术,对于提升网页交互性和吸引力至关重要。在实际应用中,开发者可以根据需求进行定制和扩展...
下面我们将深入探讨`div+css`以及如何实现`tab`样式的相关知识。 一、`div`元素 `div`(division)是HTML中的一个块级元素,常用来作为容器,对网页内容进行分组。它可以包含文本、图像、链接等其他HTML元素,通过...
总结来说,使用`div`和CSS实现选项卡效果,主要分为以下几个步骤: 1. 创建HTML结构,包括选项卡标题和内容区域。 2. 使用CSS为选项卡和内容区域定义样式。 3. 添加JavaScript(可选jQuery)处理点击事件,以切换...
这种软件旨在简化开发过程,通过预设的模板快速创建出具有Tab切换功能的界面,提高开发者的工作效率。 描述中的“模板生成tab页,降低开发难度,提高你的工作效率”进一步强调了该软件的核心价值。模板化的设计使得...
【标题】:“div+css制作...通过div元素创建容器,ul和li元素创建Tab标签,再结合CSS来设定样式和布局,最后使用JavaScript实现动态交互。掌握这些基础,就能轻松地在PHP或其他类型的网站中构建功能完善的Tab选项卡。
本篇文章将重点解析三种简洁经典且高效的`DIV+CSS`制作的Tab导航的实现方法。 一、静态Tab导航 静态Tab导航是最基础的实现方式,通常通过CSS的`display`属性来切换不同Tab的内容显示。在HTML结构中,我们可以创建...
标题 "JavaScript + CSS 实现 Tab 效果" 涉及到的是网页开发中的常见交互设计,即Tab切换功能。这种效果允许用户通过点击不同的标签来显示或隐藏相关内容,提高用户体验,尤其在信息组织和展示时非常实用。下面将...
然而,实际的Tab功能还需要JavaScript来实现,例如切换Tab时动态显示和隐藏内容。在没有JavaScript的情况下,用户仅能看到选项,但无法交互以查看不同内容。通常,我们使用事件监听(如`onclick`)来切换显示的内容...
以上就是使用JavaScript和CSS实现Tab菜单的基本步骤。在这个过程中,我们需要注意浏览器兼容性问题,可能需要引入如jQuery这样的库来简化DOM操作,或者使用CSS3特性并配合polyfill来确保在旧版浏览器中的正常运行。...
本文将详细介绍如何使用 JavaScript 和 CSS 结合实现一个基本的 Tab 菜单切换效果。 首先,我们来看 CSS 部分,这部分主要负责定义页面的基本样式和 Tab 菜单的布局。在提供的 `index.css` 文件中,可以看到以下...
这个示例会教授如何用`div+css`和可能的JavaScript/jQuery实现平滑、吸引人的图片轮播。你将学习到如何创建和控制图片容器,使用绝对定位(absolute positioning)和z-index来控制图片层叠,以及如何实现自动切换和...
在网页设计中,"CSS+Div 制作TAB"是一种常见的布局技巧,用于创建功能性的选项卡式界面。这种技术可以有效地组织和展示大量信息,而不会使页面显得杂乱无章。接下来,我们将深入探讨如何使用CSS和Div来创建TAB,并...
div+css+js模拟tab, 我这个版本,理论上可以添加无限个tab,而且,你只要管内容的添加行了,不需要改JS 当然,你得会DIV才行. div+css+js模拟tab 框1111 框2222 框3333 框4444 这里是内容撒.111.. 这里是内容...
【HTML5+CSS3 实现灵动的动画TAB切换效果】是一种常见的前端交互设计,这篇文章提供了一个DEMO,展示了如何利用这两种技术创建具有动画效果的标签页切换。在HTML5中,我们通常使用`<div>`、`<ul>`和`<li>`等元素构建...
纯CSS实现的TAB切换是一种常见的网页交互设计,它允许用户在不同的内容区域之间进行无JavaScript的导航。在本文中,我们将深入探讨纯CSS TAB切换的工作原理、关键样式以及如何实现这样的功能。 首先,理解TAB切换的...
在本项目中,“美漂亮的实用div+css模仿select下拉控件”是一个使用JavaScript(jq,即jQuery库)实现的,旨在提供一种更美观、用户体验更好的下拉选择功能。接下来,我们将详细探讨这个项目中的关键知识点。 1. **...