js自定义Tab选项卡效果


Posted in Javascript onJune 05, 2017

自定义Tab选项卡,具体内容如下

规范HTML格式

在设计选项卡之前,先规范一下HTML的格式。

<div class="m-tab-container">
  <ul >
    <li class="active"><a href="#pane1">面板1</a></li>
    <li><a href="#pane2" rel="external nofollow" >面板2</a></li>
  </ul>
  <div>
    <div id="pane1" class="active">
      这是面板1
    </div>
    <div id="pane2">
      这是面板2
    </div>
  </div>
</div>

如上述代码所示,这里并没有声明太多类名,只有容器样式类m-tab-Container和激活样式类active两个。其他元素的样式都是通过这两个类一层一层往下找然后进行设置。

设计CSS样式

.m-tab-container{
  display:flex;
}
.m-tab-container>ul, .m-tab-container>div{
  padding:0;
  margin:0;
}
.m-tab-container>ul{
  flex:0;
  min-width:50px;
}
.m-tab-container>div{
  position:relative;
  flex:1;
  border:1px solid #ddd;
  background-color:#fff;
  padding:10px;
  z-index:2;
}
.m-tab-container>ul>li{
  display:block;
  margin:0 0 5px 0;
}
.m-tab-container>ul>li>a{
  position:relative;
  line-height:40px;
  display:block;
  width:100%;
  text-align:center;
  text-decoration:none;
  background-color:#fff;
  border: 1px solid #ddd;
  border-right:0;
  z-index:1;
}
.m-tab-container>ul>li>a,
.m-tab-container>ul>li.active>a:hover,
.m-tab-container>ul>li.active>a:link,
.m-tab-container>ul>li.active>a:visited,
.m-tab-container>ul>li.active>a:active{
  color:#000;
}
.m-tab-container>ul>li.active>a{
  z-index:3;
}
.m-tab-container>div>div{
  display:none;
}
.m-tab-container>div>div.active{
  display:block;
}
.m-tab-container>ul>li.active,
.m-tab-container>ul>li.active>a{
  cursor: default;
}

li里面的a标签display设置成block后,长度超过了li,能够覆盖掉内容面板的边框形成空缺(经过测试,li设置边框之后和内容面板的div边框相距不足1px,也可以使用margin让li和div重叠,然后用li覆盖掉div的边框)。

绑定JS代码

(function($) {
 // 页面加载后的工作
 $("div.m-tab-container li a").on("click", function(e) {
  e.preventDefault();
  // 可以在这里判断被点击的a标签是否已经激活   
  $(".active").removeClass("active");
  $(this).closest("li").addClass("active")
  $($(this).attr("href")).addClass("active");
 })
})(jQuery);

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

Javascript 相关文章推荐
国外Lightbox v2.03.3 最新版 下载
Oct 17 Javascript
jquery自定义滚动条插件示例分享
Feb 21 Javascript
js操作cookie保存浏览记录的方法
Dec 25 Javascript
jQuery拖动元素并对元素进行重新排序
Dec 30 Javascript
Bootstrap3制作图片轮播效果
May 12 Javascript
AngularJS优雅的自定义指令
Jul 01 Javascript
纯js三维数组实现三级联动效果
Feb 07 Javascript
js模块加载方式浅析
Aug 12 Javascript
浅谈express 中间件机制及实现原理
Aug 31 Javascript
antd Upload 文件上传的示例代码
Dec 14 Javascript
浅谈关于vue中scss公用的解决方案
Dec 02 Javascript
实例讲解JavaScript 计时事件
Jul 04 Javascript
纯js实现动态时间显示
Sep 07 #Javascript
深入理解Angular.JS中的Scope继承
Jun 04 #Javascript
yarn的使用与升级Node.js的方法详解
Jun 04 #Javascript
npm国内镜像 安装失败的几种解决方案
Jun 04 #Javascript
Angular 4依赖注入学习教程之InjectToken的使用(八)
Jun 04 #Javascript
Angular 4依赖注入学习教程之ValueProvider的使用(七)
Jun 04 #Javascript
Angular 4依赖注入学习教程之Injectable装饰器(六)
Jun 04 #Javascript
You might like
linux使用crontab实现PHP执行计划定时任务
2014/05/10 PHP
php集成环境xampp中apache无法启动问题解决方案
2014/11/18 PHP
php使用ob_flush不能每隔一秒输出原理分析
2015/06/02 PHP
php显示时间常用方法小结
2015/06/05 PHP
PHP的数组中提高元素查找与元素去重的效率的技巧解析
2016/03/03 PHP
php图片添加文字水印实现代码
2016/03/15 PHP
Laravel框架中Blade模板的用法示例
2017/08/30 PHP
JavaScript中String和StringBuffer的速度之争
2010/04/01 Javascript
页面实时更新时间的JS实例代码
2013/12/18 Javascript
JavaScript 不支持 indexof 该如何解决
2016/03/30 Javascript
js实现弹窗暗层效果
2017/01/16 Javascript
vue resource post请求时遇到的坑
2017/10/19 Javascript
vue的diff算法知识点总结
2018/03/29 Javascript
[jQuery] 事件和动画详解
2019/03/05 jQuery
node.js中 mysql 增删改查操作及async,await处理实例分析
2020/02/11 Javascript
vue 解决兄弟组件、跨组件深层次的通信操作
2020/07/27 Javascript
解决vue侦听器watch,调用this时出现undefined的问题
2020/10/30 Javascript
[50:24]VGJ.S vs Pain 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
Python通过调用mysql存储过程实现更新数据功能示例
2018/04/03 Python
Python自定义函数计算给定日期是该年第几天的方法示例
2019/05/30 Python
Pandas中resample方法详解
2019/07/02 Python
Python正则表达式匹配日期与时间的方法
2019/07/07 Python
python内存监控工具memory_profiler和guppy的用法详解
2019/07/29 Python
超级实用的8个Python列表技巧
2020/08/24 Python
Python计算矩阵的和积的实例详解
2020/09/10 Python
工商管理应届生求职信
2013/10/07 职场文书
公司前台接待岗位职责
2013/12/03 职场文书
土木工程专业个人求职信
2013/12/30 职场文书
2014教师年度工作总结
2014/11/10 职场文书
2014年社区工作总结
2014/11/18 职场文书
工程部主管岗位职责
2015/02/12 职场文书
实习生个人总结范文
2015/02/28 职场文书
幼儿园工作总结2015
2015/04/01 职场文书
2016年五一劳动节专题校园广播稿
2015/12/17 职场文书
go语言基础 seek光标位置os包的使用
2021/05/09 Golang
Ruby使用Mysql2连接操作MySQL
2022/04/19 Ruby