jquery+css实现Tab栏切换的代码_F11 - 专业站长和开发者的学习网站

分享到

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

jquery 来源：互联网搜集作者：秩名发布时间：2019-05-15 09:40:43 人浏览

摘要

本篇文章介绍jquery+css实现Tab栏切换的代码。实现的效果图如下：（1）点击tab栏显示对应的内容，并且tab栏样式变化。实现方式：一般tab栏如果要做成比较好看的样式，会切两张图作为背景，一张用于选中时的背景，一张用于未选中的背景。这里为了简单，只用

本篇文章介绍jquery+css实现Tab栏切换的代码。

实现的效果图如下：

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

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

完整代码如下（代码下载地址）-[-/a>：

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");
 });
});

您可能感兴趣的文章 :

原文链接 : https://blog.csdn.net/u014607184/article/details/52670051

Tag : jQuery(160)tab(6)

jquery实现员工管理注册页面的代码

HTML页面代码 body div class=container h2 class=text-center用户注册/h2 form action=Baidu.html method=post class=form-horizontal div class=form-group label for=username class=
jquery实现两个div中的元素相互拖动的方法介绍

这里写了两个实例，两个都是基于jquery实现的。如果有更好的方法，欢迎分享。第一个效果图：拖动中：拖动完成后：代码实现： ? 1 2
jquery添加div实现消息聊天框代码

代码如下： htmlheadstyle* { margin: 0; padding: 0;} .border { margin-left: 300px; width: 900px; background-color: white; position: relative; border: 1px solid rgb(221, 221, 221
jQuery实现验证用户登录

内容显示效果输入之前输入之后点击校验废话少说，先上代码： HTML代码： !DOCTYPE htmlhtml xmlns=http://www.w3.org/1999/xhtmlhead meta http-equiv=Conte
html+jQuery实现拖动滑块图片拼图验证码插件（移动

电脑和手机移动端都适用的jQuery拖动滑块图片拼图验证码插件，通过鼠标拖动或触屏滑动填充拼图来进行安全验证，点击刷新可以更换当前
Jquery实现获取子元素的方法

Jquery获取子元素的方法有2种，分别是children()方法和find()方法。下面我们分别来使用这两种方法，看看它们有何差异。 1.children()方法：获取
jQuery实现的记住帐号密码功能方法

本篇文章介绍jQuery实现的记住帐号密码功能方法记住密码是每个有帐号登录的网站必备的，现在说一下通过COOKIE实现的记住密码功能。 !D
JavaScript实现的弹出遮罩层特效经典示例【基于

本篇文章介绍JavaScript实现的弹出遮罩层特效经典示例【基于jQuery】效果图：代码： !DOCTYPE htmlhtml lang=enhead meta charset=UTF-8 title查看，修改，
Laravel admin实现消息提醒、播放音频功能

本篇文章介绍Laravel admin实现消息提醒、播放音频功能 1.找到laravel-admin 中的 index.blade.php 文件进行编辑 {{-- 音频通知 --}}audio style=display:none
jQuery属性选择器用法实例

本篇文章介绍jQuery属性选择器用法实例属性选择器在HTML文档中，元素的开始标记中通常包含有多个属性(attribute) input id=txtUsername type=text