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插件
Mar 29 jQuery
jQuery为某个div加入行样式
Jun 09 jQuery
JQuery判断正整数整理小结
Aug 21 jQuery
jQuery自动或手动图片切换效果
Oct 11 jQuery
jQuery实现的鼠标滚轮控制图片缩放功能实例
Oct 14 jQuery
jquery如何实现点击空白处隐藏元素
Dec 05 jQuery
jQuery实现每隔一段时间自动更换样式的方法分析
May 03 jQuery
用jQuery将JavaScript对象转换为querystring查询字符串的方法
Nov 12 jQuery
Jquery实现获取子元素的方法分析
Aug 24 jQuery
jQuery操作选中select下拉框的值代码实例
Feb 07 jQuery
jQuery实现颜色打字机的完整代码
Mar 19 jQuery
jQuery class属性操作addClass()与removeClass()、hasClass()、toggleClass()
Mar 31 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
杏林同学录(三)
2006/10/09 PHP
PHP+Ajax实现验证码的实时验证
2016/07/20 PHP
JavaScript DOM 学习第二章 编辑文本
2010/02/19 Javascript
jQuery 源码分析笔记(5) jQuery.support
2011/06/19 Javascript
jQuery方法简洁实现隔行换色及toggleClass的使用
2013/03/15 Javascript
关于jQuery参考实例 1.0 jQuery的哲学
2013/04/07 Javascript
JS Jquery 遍历,筛选页面元素 自动完成(实现代码)
2013/07/08 Javascript
js写的评论分页(还不错)
2013/12/23 Javascript
Node.js中的模块机制学习笔记
2014/11/04 Javascript
JS实现鼠标箭头变成一个燃烧烛光效果的方法
2015/02/28 Javascript
javascript实现网页字符定位的方法
2015/07/14 Javascript
7个jQuery最佳实践
2016/01/12 Javascript
js实现表单及时验证功能 用户信息立即验证
2016/09/13 Javascript
js以分隔符分隔数组中的元素并转换为字符串的方法
2016/11/16 Javascript
jQuery ajax动态生成table功能示例
2017/06/14 jQuery
Web制作验证码功能实例代码
2017/06/19 Javascript
详解react-native-fs插件的使用以及遇到的坑
2017/09/12 Javascript
移动端自适应flexible.js的使用方法(不用三大框架,仅写一个单html页面使用)推荐
2019/04/02 Javascript
vue不操作dom实现图片轮播的示例代码
2019/12/18 Javascript
基于openlayers实现角度测量功能
2020/09/28 Javascript
[01:50:49]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Aster BO3 第三场 1月24日
2021/03/11 DOTA
Python装饰器使用实例:验证参数合法性
2015/06/24 Python
Python编程实现的简单Web服务器示例
2017/06/22 Python
Python并发:多线程与多进程的详解
2019/01/24 Python
Python生成rsa密钥对操作示例
2019/04/26 Python
python“静态”变量、实例变量与本地变量的声明示例
2020/11/13 Python
VSCode中autopep8无法运行问题解决方案(提示Error: Command failed,usage)
2021/03/02 Python
销售所有的狗狗产品:Dog.com
2016/10/13 全球购物
Ticketmaster意大利:音乐会、节日、艺术和剧院的官方门票
2019/12/23 全球购物
学生干部的自我评价分享
2014/01/18 职场文书
《尊严》教学反思
2014/02/11 职场文书
大学新生军训自我鉴定
2014/03/18 职场文书
2014年党员公开承诺践诺书
2014/03/25 职场文书
中学生社会实践活动总结
2014/07/03 职场文书
反四风个人对照检查材料
2014/09/26 职场文书
2016春季田径运动会广播稿
2015/12/21 职场文书