jQuery实现tab栏切换效果


Posted in jQuery onDecember 22, 2020

本文实例为大家分享了jQuery实现tab栏切换效果的具体代码,供大家参考,具体内容如下

具体实现功能

1、切换选项卡
2、添加选项卡
3、删除选项卡
4、编辑选项卡

html结构

<div class="tabsbox" id="tab">
   <!-- tab标签 -->
   <nav class="firstnav">
    <!-- tab栏标题 -->
    <ul>
     <li class="liactive">
      <span>测试1</span>
      <span class="close">×</span>
     </li>
     <li><span>测试2</span><span class="close">×</span></li>
     <li><span>测试3</span><span class="close">×</span></li>
    </ul>
    <!-- 添加按钮 -->
    <div class="tabadd">
     <span>+</span>
    </div>
   </nav>

   <!-- tab 内容 -->
   <div class="tabscon">
    <section class="conactive">内容1</section>
    <section>内容2</section>
    <section>内容3</section>
   </div>
</div>

css部分

* {
 margin: 0;
 padding: 0;
}
main {
 width: 900px;
 margin: 0px auto;
}
h4 {
 text-align: center;
 line-height: 50px;
}
.tabsbox {
 width: 800px;
 margin: 0 auto;
 border: 1px solid orange;
}
.firstnav {
 position: relative;
 line-height: 40px;
 height: 40px;
 text-align: center;
 border-bottom: 1px solid #999;
}
.firstnav li {
 list-style: none;
 width: 100px;
 float: left;
 border-right: 1px solid #999;
 position: relative;
 cursor: pointer;
}
.firstnav li span {
 /* 阻止用户选中文字 */
 user-select: none;
}
.firstnav li.liactive::after {
 content: "";
 width: 100%;
 height: 2px;
 position: absolute;
 z-index: 11;
 bottom: -2px;
 left: 0;
 background: #fff;
}
.firstnav .close {
 cursor: pointer;
 position: absolute;
 right: 2px;
 top: 2px;
 font-size: 14px;
 color: #666;
 border: 1px solid #ccc;
 width: 14px;
 height: 14px;
 line-height: 12px;
 text-align: center;
 border-radius: 100%;
}
.tabscon {
 height: 300px;
 white-space: normal;
}
.tabscon input {
 width: 100%;
 height: 80px;
}
.tabscon section {
 padding: 30px;
 display: none;
}
.tabscon section.conactive {
 display: block;
}
.tabadd {
 position: absolute;
 padding: 0 10px;
 right: 10px;
 top: 0px;
 font-size: 20px;
 cursor: pointer;
 user-select: none;
}
input {
 width: 50px;
 line-height: 20px;
}

jQuery部分

$(function() {
 // 点击切换
 $('ul').on('click', 'li', function() {
  // 切换选项卡
  $(this).addClass('liactive').siblings().removeClass('liactive')
  // 获取点击的li的索引值
  var index = $(this).index()
  // 排他思想让内容显示与隐藏
  $('.tabscon section').eq(index).stop().show().siblings().hide()
 })
 // 添加选项卡
 $('.tabadd').click(function() {
  // 只能创建7个
  if ($('li').length >= 7) {
  return
  }
  var li = `
 <li><span>New Tab</span><span class="close">×</span></li>
 `
  var section = `
 <section>新增内容</section>
 `
  // 把新增的li添加到ul
  $('ul').append(li)
  // 把新增的内容添加到tabscon
  $('.tabscon').append(section)
  // $('ul li').length - 1这里获取的是索引从0开始
  $('ul').children().eq($('ul li').length - 1).click()
 })
 // 删除选项卡
 $('ul').on('click', '.close', function() {
  // 获取当前li的索引
  var index = $(this).parent('li').index()
  // console.log(index)
  // 要进行判断
  // 三个状态:
  // 1.选中的还是未选中的,不选中不管它
  // 2.选中的情况删除的是第一个,点击后面一个
  // 3.只剩一个不管
  // 如果当前的li是被点击的
  if ($(this).parent().hasClass('liactive')) {
  // 如果当前被点击的不是第一个li
  if (index != 0) {
   // 让它上一个li被点击
   $(this).parent('li').prev().click()
   // 如果li不止一个让下一个li点击
  } else if ($('ul li').length != 1) {
   $(this).parent('li').next().click()
  }
  }
  // 移除当前li
  $(this).parent().remove()
  // 移除当前的内容
  $('.tabscon section').eq(index).remove()
 })
 // 编辑选项卡
 $('ul').on('dblclick', 'li', function() {
 // 选中li子元素的第一个span
 $(this).children().eq(0).html('<input type="text" value="' + $(this).children().eq(0).text() + '"/>')
  // 选中输入框中的文字
 $(this).find('input').select()
  // 失去焦点让span的值等于输入框中的值
 $('input').blur(function() {
  // 让span的值等于输入框中的值
  $(this).parent().text($(this).val())
  })
  // 键盘抬起事件
 $('input').keyup(function(e) {
  // 按下回车失去焦点
  if (e.keyCode == 13) {
  $(this).blur()
  }
 })

 })

})

jQuery实现tab栏切换效果

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery设置图片等比例缩小的方法
Apr 29 jQuery
jquery.uploadifive插件怎么解决上传限制图片或文件大小问题
May 08 jQuery
JQuery判断正整数整理小结
Aug 21 jQuery
jQuery选择器之属性筛选选择器用法详解
Sep 19 jQuery
jquery使用iscorll实现上拉、下拉加载刷新
Oct 26 jQuery
jquery手机触屏滑动拼音字母城市选择器的实例代码
Dec 11 jQuery
jQuery中复合选择器简单用法示例
Mar 31 jQuery
jQuery实现判断上传图片类型和大小的方法示例
Apr 11 jQuery
jQuery实现input[type=file]多图预览上传删除等功能
Aug 02 jQuery
jQuery实现倒计时功能完整示例
Jun 01 jQuery
jQuery实现简单三级联动效果
Sep 05 jQuery
jQuery实现简单弹幕制作
Dec 10 jQuery
jQuery+ajax实现文件上传功能
Dec 22 #jQuery
jQuery实现动态向上滚动
Dec 21 #jQuery
Jquery+javascript实现支付网页数字键盘
Dec 21 #jQuery
jquery实现淡入淡出轮播图效果
Dec 13 #jQuery
jquery实现拖拽小方块效果
Dec 10 #jQuery
jQuery实现简单弹幕制作
Dec 10 #jQuery
JQuery绑定事件四种实现方法解析
Dec 02 #jQuery
You might like
台湾中原大学php教程孙仲岳主讲
2008/01/07 PHP
PHP中获取文件扩展名的N种方法小结
2012/02/27 PHP
php学习之function的用法
2012/07/14 PHP
php中生成随机密码的自定义函数代码
2013/10/21 PHP
PHP实现的解汉诺塔问题算法示例
2018/08/06 PHP
PHPExcel实现的读取多工作表操作示例
2020/04/14 PHP
一步一步制作jquery插件Tabs实现过程
2010/07/06 Javascript
JavaScript必知必会(五) eval 的使用
2016/06/08 Javascript
vue2.0开发实践总结之入门篇
2016/12/06 Javascript
JS获取浮动(float)元素的style.left值为空的快速解决办法
2017/02/19 Javascript
解决ztree搜索中多级菜单展示不全问题
2017/07/05 Javascript
Webpack打包字体font-awesome的方法示例
2018/04/26 Javascript
在vue中使用SockJS实现webSocket通信的过程
2018/08/29 Javascript
JS如何实现动态添加的元素绑定事件
2019/11/12 Javascript
JavaScript代码简化技巧实例解析
2020/09/09 Javascript
从零学python系列之浅谈pickle模块封装和拆封数据对象的方法
2014/05/23 Python
跟老齐学Python之让人欢喜让人忧的迭代
2014/10/02 Python
python通过装饰器检查函数参数数据类型的方法
2015/03/13 Python
在Python中操作日期和时间之gmtime()方法的使用
2015/05/22 Python
Python中Django框架下的staticfiles使用简介
2015/05/30 Python
Python程序员面试题 你必须提前准备!(答案及解析)
2018/01/23 Python
selenium+python自动化测试环境搭建步骤
2019/06/03 Python
python3.6生成器yield用法实例分析
2019/08/23 Python
python TK库简单应用(实时显示子进程输出)
2019/10/29 Python
基于python实现微信好友数据分析(简单)
2020/02/16 Python
Python Numpy,mask图像的生成详解
2020/02/19 Python
纯CSS3制作页面切换效果的实例代码
2019/05/30 HTML / CSS
澳洲小众品牌的集合网站:BNKR
2018/02/23 全球购物
体育纪念品、亲笔签名的体育收藏品:Steiner Sports
2020/07/31 全球购物
毕业生文员求职信
2013/11/03 职场文书
信息管理员岗位职责
2013/12/01 职场文书
法院个人总结
2015/03/03 职场文书
二手房购房意向书
2015/05/09 职场文书
幸福终点站观后感
2015/06/04 职场文书
nginx的zabbix 5.0安装部署的方法步骤
2021/07/16 Servers
低门槛开发iOS、Android、小程序应用的前端框架详解
2021/10/16 Javascript