`
云上太阳
  • 浏览: 131342 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

div+css实现tab切换

阅读更多

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>

 

  • 大小: 85.2 KB
0
0
分享到:
评论
2 楼 云上太阳 2015-12-03  
popopop 写道
 $(function(){
	$(".tab-head li").mouseover(function(){
		$(this).attr("class","select").siblings().attr("class","");
		$(".tab-panel").css("left",-$(this).index()+"00%");
	})
 })

嗯,这个是jQuery的处理方式,不错
1 楼 popopop 2015-12-03  
 $(function(){
	$(".tab-head li").mouseover(function(){
		$(this).attr("class","select").siblings().attr("class","");
		$(".tab-panel").css("left",-$(this).index()+"00%");
	})
 })

相关推荐

    DIV+CSS+JavaScript实现tab切换的选项卡

    本教程将重点讲解如何利用这三种技术实现tab切换的选项卡功能。 1. **HTML 结构**: 首先,我们需要创建一个包含多个`div`的结构,每个`div`代表一个选项卡的内容。通常,我们会有一个父级`div`作为容器,每个选项...

    js控制层和DIV+CSS实现TAB菜单

    5. 添加键盘快捷键支持,通过监听键盘事件,实现Tab切换。 总的来说,利用JS、Div和CSS结合,可以创建出响应式、动态的TAB菜单,提高网页的互动性和用户体验。这个主题的学习和实践对于前端开发者来说是非常有价值...

    Div+Css的Tab菜单

    - 每个Tab作为一个单独的Div,可以通过JavaScript或CSS来切换其激活状态。 - 内容区Div根据Tab的切换,动态显示或隐藏相应的子内容区域。 4. **Tab菜单的交互实现**: - 通过JavaScript或jQuery实现Tab的点击...

    div+css:Tab自适应的示例代码

    4. **JavaScript 动态切换**:虽然可以通过纯 CSS 实现简单的 `Tab` 切换,但为了实现点击切换功能,我们需要使用 JavaScript。这里可以使用 `addEventListener` 监听点击事件,更新 `Tab` 的选中状态并显示对应的...

    jQuery+css实现tab切换效果

    总结,jQuery+CSS实现的Tab切换效果结合了JavaScript的动态性和CSS的样式控制,能够提供优秀的用户体验。理解并掌握这一技术,对于提升网页交互性和吸引力至关重要。在实际应用中,开发者可以根据需求进行定制和扩展...

    div+css tab样式

    下面我们将深入探讨`div+css`以及如何实现`tab`样式的相关知识。 一、`div`元素 `div`(division)是HTML中的一个块级元素,常用来作为容器,对网页内容进行分组。它可以包含文本、图像、链接等其他HTML元素,通过...

    用div+css实现选项卡效果(适用于任何浏览器)

    总结来说,使用`div`和CSS实现选项卡效果,主要分为以下几个步骤: 1. 创建HTML结构,包括选项卡标题和内容区域。 2. 使用CSS为选项卡和内容区域定义样式。 3. 添加JavaScript(可选jQuery)处理点击事件,以切换...

    div+css制作tab页软件,超好用

    这种软件旨在简化开发过程,通过预设的模板快速创建出具有Tab切换功能的界面,提高开发者的工作效率。 描述中的“模板生成tab页,降低开发难度,提高你的工作效率”进一步强调了该软件的核心价值。模板化的设计使得...

    div+css制作Tab选项卡.docx

    【标题】:“div+css制作...通过div元素创建容器,ul和li元素创建Tab标签,再结合CSS来设定样式和布局,最后使用JavaScript实现动态交互。掌握这些基础,就能轻松地在PHP或其他类型的网站中构建功能完善的Tab选项卡。

    三种简洁的经典高效的DIV+CSS制作的Tab导航简析

    本篇文章将重点解析三种简洁经典且高效的`DIV+CSS`制作的Tab导航的实现方法。 一、静态Tab导航 静态Tab导航是最基础的实现方式,通常通过CSS的`display`属性来切换不同Tab的内容显示。在HTML结构中,我们可以创建...

    javascript+CSS实现Tab效果

    标题 "JavaScript + CSS 实现 Tab 效果" 涉及到的是网页开发中的常见交互设计,即Tab切换功能。这种效果允许用户通过点击不同的标签来显示或隐藏相关内容,提高用户体验,尤其在信息组织和展示时非常实用。下面将...

    div+css制作Tab选项卡.pdf

    然而,实际的Tab功能还需要JavaScript来实现,例如切换Tab时动态显示和隐藏内容。在没有JavaScript的情况下,用户仅能看到选项,但无法交互以查看不同内容。通常,我们使用事件监听(如`onclick`)来切换显示的内容...

    js+css实现tab菜单,很漂亮

    以上就是使用JavaScript和CSS实现Tab菜单的基本步骤。在这个过程中,我们需要注意浏览器兼容性问题,可能需要引入如jQuery这样的库来简化DOM操作,或者使用CSS3特性并配合polyfill来确保在旧版浏览器中的正常运行。...

    js+css实现tab菜单切换效果的方法.docx

    本文将详细介绍如何使用 JavaScript 和 CSS 结合实现一个基本的 Tab 菜单切换效果。 首先,我们来看 CSS 部分,这部分主要负责定义页面的基本样式和 Tab 菜单的布局。在提供的 `index.css` 文件中,可以看到以下...

    div+css设计典范收藏

    这个示例会教授如何用`div+css`和可能的JavaScript/jQuery实现平滑、吸引人的图片轮播。你将学习到如何创建和控制图片容器,使用绝对定位(absolute positioning)和z-index来控制图片层叠,以及如何实现自动切换和...

    css+div 制作TAB

    在网页设计中,"CSS+Div 制作TAB"是一种常见的布局技巧,用于创建功能性的选项卡式界面。这种技术可以有效地组织和展示大量信息,而不会使页面显得杂乱无章。接下来,我们将深入探讨如何使用CSS和Div来创建TAB,并...

    div+css+js模拟tab切换效果 事件绑定 IE,firefox兼容

    div+css+js模拟tab, 我这个版本,理论上可以添加无限个tab,而且,你只要管内容的添加行了,不需要改JS 当然,你得会DIV才行. div+css+js模拟tab 框1111 框2222 框3333 框4444 这里是内容撒.111.. 这里是内容...

    HTML5+CSS3 实现灵动的动画 TAB 切换效果(DEMO)

    【HTML5+CSS3 实现灵动的动画TAB切换效果】是一种常见的前端交互设计,这篇文章提供了一个DEMO,展示了如何利用这两种技术创建具有动画效果的标签页切换。在HTML5中,我们通常使用`&lt;div&gt;`、`&lt;ul&gt;`和`&lt;li&gt;`等元素构建...

    纯CSS写的TAB切换

    纯CSS实现的TAB切换是一种常见的网页交互设计,它允许用户在不同的内容区域之间进行无JavaScript的导航。在本文中,我们将深入探讨纯CSS TAB切换的工作原理、关键样式以及如何实现这样的功能。 首先,理解TAB切换的...

    美漂亮的实用div+css模仿select下拉控件

    在本项目中,“美漂亮的实用div+css模仿select下拉控件”是一个使用JavaScript(jq,即jQuery库)实现的,旨在提供一种更美观、用户体验更好的下拉选择功能。接下来,我们将详细探讨这个项目中的关键知识点。 1. **...

Global site tag (gtag.js) - Google Analytics