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

div+css实现tab切换

tabtab切换 
阅读更多

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
踩
分享到：
| jQuery Validate 验证表达合法性
评论
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．． 这里是内容...

    纯CSS写的TAB切换

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

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

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

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

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

Magicbox
Global site tag (gtag.js) - Google Analytics