jquery+css实现Tab栏切换的代码实例

简介: jquery+css实现Tab栏切换的代码实例

前几天面试碰到现场给写一个Tab栏切换的功能,思想基本上懂,但是好久没写过,一时要全部实现效果还真有点难。回来后,再把思路理一理,写一个,基础还是很重要的。

最终要实现的效果图如下:

(1)点击tab栏显示对应的内容,并且tab栏样式变化。实现方式:一般tab栏如果要做成比较好看的样式,会切两张图作为背景,一张用于选中时的背景,一张用于未选中的背景。这里为了简单,只用css设置样式。然后为每个tab绑定click事件,当触发click事件时,对应的内容div的display设置block,否则设置为none。

(2)当鼠标悬停在没有选中的tab栏上时,改变样式,移开时又恢复回来的样式。如果tab栏已选中,则鼠标是否悬停不影响样式。实现方式:为tab栏添加hover事件,当鼠标进入时,判断该tab栏是不是被选中(可以为了选中的tab栏设置一个class,只需要判断是否含有该class即可),在不选中的情况下再添加hover的样式。

完整代码如下(代码下载地址):

HTML:

 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>tab标签</title>
<link href="css/style.css" rel="external nofollow" type="text/css" rel="stylesheet">
</head>
<body>
<div class="tab-contain">
<!-- tab栏 -->
<ul id="tabs">
<li class="current"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" title="tab1">One</a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" title="tab2">Two</a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" title="tab3">Three</a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" title="tab4">Four</a></li>
</ul>
<!-- 对应显示内容 -->
<div id="content">
<div id="tab1" class="item show">
<h2>title 11111</h2>
<p>text here!!!text here!!!text here!!!text here!!!text here!!!</p>
<p>text here!!!text here!!!text here!!!text here!!!text here!!!text here!!!text here!!!text here!!!text here!!!text here!!!</p>
</div>
<div id="tab2" class="item">
<h2>title 2222</h2>
<p>text here!!!text here!!!text here!!</p>
<p>text here!!!text here!!!text here!!!text here!text here!!!text here!!!text here!!!</p>
</div>
<div id="tab3" class="item">
<h2>title 33333</h2>
<p>text here!!!</p>
<p>text here!!!text here!!!text here!!!text here!!!text here!!!text here!!!text here!!!text here!!!text here!!!text here!!!</p>
</div>
<div id="tab4" class="item">
<h2>title 44444</h2>
<p>text here!!!text here!!!text here!!!text here!!!text here!!!</p>
<p>text here!!!text </p>
</div>
</div>
</div>
 
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js.js"></script>
</body>
</html>

CSS:

 

.tab-contain{
margin: 50px auto;
width: 1000px;
padding:100px;
background: #7F7D7D;
}
#tabs {
overflow: hidden;
width: 100%;
margin: 0;
padding: 0;
list-style: none;
}
#tabs li {
float: left;
margin: 0;
}
li a {
position: relative;
background: #ddd;
padding: 10px 50px;
float: left;
text-decoration: none;
color: #444;
text-shadow: 0 1px 0 rgba(255, 255, 255, .8);
border-radius: 20px 20px 0 0;
box-shadow: 0 2px 2px rgba(0, 0, 0, .4);
}
 
.current a{
outline: 0;
background: #fff;
z-index: 4;
}
.hoverItem a{
background: #AAC8B9;
}
#content {
background: #fff;
padding: 50px;
height: 220px;
position: relative;
border-radius: 0 5px 5px 5px;
box-shadow: 0 -2px 3px -2px rgba(0, 0, 0, .5);
}
.item{
display: none;
}
 
.show{
display: block;
}

JS:

 

$(function(){
$('#tabs a').click(function(e) {
e.preventDefault();
$('#tabs li').removeClass("current").removeClass("hoverItem");
$(this).parent().addClass("current");
$("#content div").removeClass("show");
$('#' + $(this).attr('title')).addClass('show');
});
 
$('#tabs a').hover(function(){
if(!$(this).parent().hasClass("current")){
$(this).parent().addClass("hoverItem");
}
},function(){
$(this).parent().removeClass("hoverItem");
});
});
目录
相关文章
|
9天前
|
Web App开发 前端开发 JavaScript
只需一行CSS代码,让长列表网页的渲染性能提升几倍以上!
只需一行CSS代码,让长列表网页的渲染性能提升几倍以上!
|
9天前
|
JavaScript 前端开发 索引
jQuery学习教程,写更少的代码,做更多的事情(二)
jQuery学习教程,写更少的代码,做更多的事情(二)
|
11天前
|
存储 移动开发 JavaScript
jQuery 根据 css 类筛选 DOM 元素的代码
jQuery 根据 css 类筛选 DOM 元素的代码
22 1
|
12天前
|
移动开发 HTML5
HTML5/CSS3粒子效果进度条代码
HTML5/CSS3进度条应用。这款进度条插件在播放进度过程中出现粒子效果,就像一些小颗粒从进度条上散落下来
23 0
HTML5/CSS3粒子效果进度条代码
|
12天前
|
缓存 前端开发 IDE
【专栏:工具与技巧篇】HTML与CSS代码压缩与合并
【4月更文挑战第30天】本文探讨了优化Web性能的关键——HTML和CSS代码压缩与合并。代码压缩通过移除空白字符、注释和缩短标识符减小文件大小,而代码合并则减少HTTP请求。开发者可借助在线工具、构建工具插件、编辑器扩展或手动方式实现压缩和合并。最佳实践中,应保留未压缩备份,测试压缩效果,利用缓存并自动化流程。同时,注意适度优化,避免影响首屏渲染速度。关注新工具和策略以维持网站性能和可维护性。
|
12天前
|
前端开发 UED 开发者
【专栏】探讨了CSS3动画卡顿的原因,包括复杂动画效果、过多元素参与、低效代码结构和硬件资源限制,并提出优化措施
【4月更文挑战第29天】本文探讨了CSS3动画卡顿的原因,包括复杂动画效果、过多元素参与、低效代码结构和硬件资源限制,并提出优化措施:简化动画路径、控制元素数量、优化代码结构、利用硬件加速及性能监测。通过实际案例展示了优化效果,强调了性能优化对提升用户体验的重要性。在开发中,应持续关注并优化动画性能,以适应网页应用的需求。
|
前端开发 容器 移动开发
|
Web App开发 前端开发 JavaScript
|
Web App开发 前端开发 JavaScript
|
Web App开发 JavaScript 前端开发