编程 Javascript

jQuery实现TAB选项卡切换特效简单演示

Posted in Javascript onMarch 04, 2016

本文实例为大家分享jQuery实现TAB选项卡切换特效，供大家参考，具体内容如下

1、tab切换 on

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>jQuery tab切换</title>
 <style type="text/css">
 *{
  margin:0;
  padding:0;
 }
 .wrap{
  margin-left: 50px;
  margin-top: 50px;
 }
 /*清浮动---clearfix*/
 .clearfix {
  *zoom: 1;
 }
 .clearfix:after {
  content: "";
  clear: both;
  display: block;
  height: 0;
  font-size: 0;
  visibility: hidden;
 }
 .blist {
  border:1px solid #d9d9d9;
  width: 275px;
  height: 32px;
 }
 .blist li:first-child{
  border-left: none;
 }
 .blist li{
  list-style: none;
  width: 68px;
  height: 32px;
  border-left:1px solid #d9d9d9;
  font-size: 14px;
  font-family: "楷体";
  line-height: 32px;
  text-align: center;
  float: left;
  /*鼠标样式改变为一个手*/
  cursor: pointer;
  /*字体免选中*/
  -webkit-user-select: none;
 
 }
 .blsit-list{
  width: 275px;
 }
 .blsit-list li{
  list-style: none;
  width: 275px;
  border:1px solid #ccc;
  height: 200px;
  border-top: none;
 }
 .wrap .blist li.active{
  font-weight: bold;
  color: red;
  border-top: 2px solid red;
  position: relative;
  top:-1px;
  height: 31px;
 }
 .blsit-list li:first-child{
  display: block;
 }
 .blsit-list li{
  display: none;
 }
 </style>
</head>
<body>
 <div class="wrap">
  <ul class="blist clearfix">
   <li class="active">电影</li>
   <li>电脑</li>
   <li>冰箱</li>
   <li>空调</li>
  </ul>
  <ul class="blsit-list">
   <li>A</li>
   <li>B</li>
   <li>C</li>
   <li>D</li>
  </ul>
 </div>
 <div class="wrap">
  <ul class="blist clearfix">
   <li class="active">电影</li>
   <li>电脑</li>
   <li>冰箱</li>
   <li>空调</li>
  </ul>
  <ul class="blsit-list">
   <li>A</li>
   <li>B</li>
   <li>C</li>
   <li>D</li>
  </ul>
 </div>
 <div class="wrap">
  <ul class="blist clearfix">
   <li class="active">电影</li>
   <li>电脑</li>
   <li>冰箱</li>
   <li>空调</li>
  </ul>
  <ul class="blsit-list">
   <li>A</li>
   <li>B</li>
   <li>C</li>
   <li>D</li>
  </ul>
 </div>
 <div class="wrap">
  <ul class="blist clearfix">
   <li class="active">电影</li>
   <li>电脑</li>
   <li>冰箱</li>
   <li>空调</li>
  </ul>
  <ul class="blsit-list">
   <li>A</li>
   <li>B</li>
   <li>C</li>
   <li>D</li>
  </ul>
 </div>
 <script type="text/javascript" src="jquery-1.11.3.min.js"></script>
 <script type="text/javascript">
 $(function(){
  $(".blist").on("click","li",function(){
   // 设index为当前点击
   var index = $(this).index();
   // 点击添加样式利用siblings清除其他兄弟节点样式
   $(this).addClass("active").siblings().removeClass("active");
   // 同理显示与隐藏
   $(this).parents(".wrap").find(".blsit-list li").eq(index).show().siblings().hide();
  })
 })
 </script>
</body>
</html>

2、tab切换 mouseenter

效果图：

jQuery实现TAB选项卡切换特效简单演示

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>jQuery tab切换</title>
 <style type="text/css">
 *{
  margin:0;
  padding:0;
 }
 .wrap{
  margin-left: 50px;
  margin-top: 50px;
 }
 /*清浮动---clearfix*/
 .clearfix {
  *zoom: 1;
 }
 .clearfix:after {
  content: "";
  clear: both;
  display: block;
  height: 0;
  font-size: 0;
  visibility: hidden;
 }
 .blist {
  border:1px solid #d9d9d9;
  width: 275px;
  height: 32px;
 }
 .blist li:first-child{
  border-left: none;
 }
 .blist li{
  list-style: none;
  width: 68px;
  height: 32px;
  border-left:1px solid #d9d9d9;
  font-size: 14px;
  font-family: "楷体";
  line-height: 32px;
  text-align: center;
  float: left;
  /*鼠标样式改变为一个手*/
  cursor: pointer;
  /*字体免选中*/
  -webkit-user-select: none;
 
 }
 .blsit-list{
  width: 275px;
 }
 .blsit-list li{
  list-style: none;
  width: 275px;
  border:1px solid #ccc;
  height: 200px;
  border-top: none;
 }
 .wrap .blist li.active{
  font-weight: bold;
  color: red;
  border-top: 2px solid red;
  position: relative;
  top:-1px;
  height: 31px;
 }
 .blsit-list li:first-child{
  display: block;
 }
 .blsit-list li{
  display: none;
 }
 </style>
</head>
<body>
 <div class="wrap">
  <ul class="blist clearfix">
   <li class="active">电影</li>
   <li>电脑</li>
   <li>冰箱</li>
   <li>空调</li>
  </ul>
  <ul class="blsit-list">
   <li>A</li>
   <li>B</li>
   <li>C</li>
   <li>D</li>
  </ul>
 </div>
 <div class="wrap">
  <ul class="blist clearfix">
   <li class="active">电影</li>
   <li>电脑</li>
   <li>冰箱</li>
   <li>空调</li>
  </ul>
  <ul class="blsit-list">
   <li>A</li>
   <li>B</li>
   <li>C</li>
   <li>D</li>
  </ul>
 </div>
 <div class="wrap">
  <ul class="blist clearfix">
   <li class="active">电影</li>
   <li>电脑</li>
   <li>冰箱</li>
   <li>空调</li>
  </ul>
  <ul class="blsit-list">
   <li>A</li>
   <li>B</li>
   <li>C</li>
   <li>D</li>
  </ul>
 </div>
 <div class="wrap">
  <ul class="blist clearfix">
   <li class="active">电影</li>
   <li>电脑</li>
   <li>冰箱</li>
   <li>空调</li>
  </ul>
  <ul class="blsit-list">
   <li>A</li>
   <li>B</li>
   <li>C</li>
   <li>D</li>
  </ul>
 </div>
 <script type="text/javascript" src="jquery-1.11.3.min.js"></script>
 <script type="text/javascript">
 $(function(){
  $(".blist li").on("mouseenter",function(){
   var index = $(this).index();
   $(this).addClass("active").siblings().removeClass("active"); 
   $(this).parents(".wrap").find(".blsit-list li").eq(index).show().siblings().hide();
  })
 })
 </script>
</body>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助。

jQuery实现TAB选项卡切换特效简单演示

- Author -

lijiao

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

JavaScript 继承详解（三）

Jul 13 Javascript

js保存当前路径(cookies记录)

Dec 14 Javascript

改进UCHOME的记录发布，增强可访问性用户体验

Jan 17 Javascript

Javascript拓展String方法小结

Jul 08 Javascript

js如何判断访问是来自搜索引擎(蜘蛛人)还是直接访问

Sep 14 Javascript

JS截取字符串实例详解

Nov 24 Javascript

Javascript字符串拼接小技巧(推荐)

Jun 02 Javascript

Vue.js每天必学之方法与事件处理器

Sep 06 Javascript

详解vue2父组件传递props异步数据到子组件的问题

Jun 29 Javascript

jackson解析json字符串,首字母大写会自动转为小写的方法

Dec 22 Javascript

JS实现面向对象继承的5种方式分析

Jul 21 Javascript

详解Vue.js3.0 组件是如何渲染为DOM的

Nov 10 Javascript

jquery实现页面常用的返回顶部效果

Mar 04 #Javascript

JavaScript模拟鼠标右键菜单效果

Dec 08 #Javascript

javascript实现移动端上的触屏拖拽功能

Mar 04 #Javascript

基于zepto的移动端轻量级日期插件--date_picker

Mar 04 #Javascript

基于Javascript实现二级联动菜单效果

Mar 04 #Javascript

jquery ajax双击div可直接修改div中的内容

Mar 04 #Javascript

js实现文字滚动效果

Mar 03 #Javascript

You might like

php 获得汉字拼音首字母的函数

2009/08/01 PHP

php发送get、post请求的6种方法简明总结

2014/07/08 PHP

IE与FireFox的JavaScript兼容问题解决办法

2013/12/31 Javascript

javascript自动给文本url地址增加链接的方法分享

2014/01/20 Javascript

SWFObject基本用法实例分析

2015/07/20 Javascript

手机端转盘抽奖代码分享

2015/09/10 Javascript

js实现兼容IE、Firefox的图片缩放代码

2015/12/08 Javascript

浅析BootStrap栅格系统

2016/06/07 Javascript

AngularJS入门教程之服务(Service)

2016/07/27 Javascript

原生js实现轮播图的示例代码

2017/02/20 Javascript

jQuery返回定位插件详解

2017/05/15 jQuery

深入理解Nodejs Global 模块

2017/06/03 NodeJs

vue环境搭建简单教程

2017/11/07 Javascript

JS异步函数队列功能实例分析

2017/11/28 Javascript

nodejs结合socket.io实现websocket通信功能的方法

2018/01/12 NodeJs

vue.js,ajax渲染页面的实例

2018/02/11 Javascript

webpack热模块替换（HMR）/热更新的方法

2018/04/05 Javascript

vue 音乐App QQ音乐搜索列表最新接口跨域设置方法

2018/09/25 Javascript

Javascript中parseInt的正确使用方式

2018/10/17 Javascript

vue App.vue中的公共组件改变值触发其他组件或.vue页面监听

2019/05/31 Javascript

你可能从未使用过的11+个JavaScript特性(小结)

2020/01/08 Javascript

python如何定义带参数的装饰器

2018/03/20 Python

python画图系列之个性化显示x轴区段文字的实例

2018/12/13 Python

numpy 返回函数的上三角矩阵实例

2019/11/25 Python

解决pycharm同一目录下无法import其他文件

2020/02/12 Python

python异步Web框架sanic的实现

2020/04/27 Python

如何用Python提取10000份log中的产品信息

2021/01/14 Python

IE10 Error.stack 让脚本调试更加方便快捷

2013/04/22 HTML / CSS

Smilodox官方运动服装店：从运动服到健身配件

2020/08/27 全球购物

毕业生个人投资创业计划书

2014/01/04 职场文书

西式婚礼证婚词

2014/01/12 职场文书

村干部承诺书

2014/03/28 职场文书

党员群众路线对照检查材料

2014/08/31 职场文书

辞职信范文大全

2015/03/02 职场文书

升职自荐信范文

2015/03/27 职场文书

2015年禁毒工作总结

2015/04/30 职场文书