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 相关文章推荐
js小技巧--自动隐藏红叉叉
Aug 13 Javascript
js arguments对象应用介绍
Nov 28 Javascript
使用js实现按钮控制文本框加1减1应用于小时+分钟
Dec 09 Javascript
jQuery中on()方法用法实例详解
Feb 06 Javascript
javascript html实现网页版日历代码
Mar 08 Javascript
JS获取随机数和时间转换的简单实例
Jul 10 Javascript
JS重载实现方法分析
Dec 16 Javascript
jQuery插件echarts实现的单折线图效果示例【附demo源码下载】
Mar 04 Javascript
jquery实现超简单的瀑布流布局【推荐】
Mar 08 Javascript
jQuery实现简易聊天框
Feb 08 jQuery
JQuery绑定事件四种实现方法解析
Dec 02 jQuery
JavaScript中遍历的十种方法总结
Dec 15 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
Thinkphp实现自动验证和自动完成
2015/12/19 PHP
php使用PDO从数据库表中读取数据的实现方法(必看)
2017/06/02 PHP
Laravel 实现在Blade模版中使用全局变量代替路径的例子
2019/10/22 PHP
js常用代码段整理
2011/11/30 Javascript
jquery创建一个ajax关键词数据搜索实现思路
2013/02/26 Javascript
nodejs分页类代码分享
2014/06/17 NodeJs
javascript使用appendChild追加节点实例
2015/01/12 Javascript
jQuery模拟原生态App上拉刷新下拉加载更多页面及原理
2015/08/10 Javascript
javascript中select下拉框的用法总结
2016/01/07 Javascript
Vue 2.X的状态管理vuex记录详解
2017/03/23 Javascript
js中less常用的方法小结
2017/08/09 Javascript
JavaScript实现的数字与字符串转换功能示例
2017/08/23 Javascript
详解用函数式编程对JavaScript进行断舍离
2017/09/18 Javascript
jquery如何实现点击空白处隐藏元素
2017/12/05 jQuery
微信小程序使用image组件显示图片的方法【附源码下载】
2017/12/08 Javascript
利用ES6实现单例模式及其应用详解
2017/12/09 Javascript
vue 项目中使用Loading组件的示例代码
2018/08/31 Javascript
JSON生成Form表单的方法示例
2018/11/21 Javascript
Vue运用transition实现过渡动画
2019/05/06 Javascript
javascript设计模式 ? 原型模式原理与应用实例分析
2020/04/10 Javascript
vue v-for 点击当前行,获取当前行数据及event当前事件对象的操作
2020/09/10 Javascript
vue+openlayers绘制省市边界线
2020/12/24 Vue.js
Python3实战之爬虫抓取网易云音乐的热门评论
2017/10/09 Python
利用TensorFlow训练简单的二分类神经网络模型的方法
2018/03/05 Python
Python爬取股票信息,并可视化数据的示例
2020/09/26 Python
如何通过python检查文件是否被占用
2020/12/18 Python
Javascript 高级手势使用介绍
2013/04/21 HTML / CSS
推荐10个HTML5响应式框架
2016/02/25 HTML / CSS
EVE LOM英国官网:全世界最好的洁面膏
2017/10/30 全球购物
美国隐形眼镜网上商店:Lens.com
2019/09/03 全球购物
意大利在线药房:Saninforma
2021/02/11 全球购物
工地安全质量标语
2014/06/07 职场文书
大学毕业生个人自荐书
2014/07/02 职场文书
大学专科求职信
2014/07/02 职场文书
幼儿园户外活动总结
2014/07/04 职场文书
幼儿园六一儿童节活动总结
2015/02/10 职场文书