多语言展示
当前在线:1425今日阅读:26今日分享:39

最简单的Tab选项卡,没有之一。

由于本人程序员一枚,养成了一个怪习惯就是在互联网找资源,该资源,但是选项卡一直都没有遇到合适的!表示很苦恼,最终手写了一个最简洁的!
工具/原料

代码编辑器

方法/步骤
1

这里首先看一下效果,为三个选项卡,是不是特别简洁!

2

html部分的代码如下,只是几个class自己做一点适当的调试就这几行代码,稍后贴出样式!当然也可以自己写样式

  • Tab1
  • Tab2
  • Tab3
1
2
3

3

这里是对应的几个样式:全部列出来,可以复制使用,写到css文件就好了!路径要正确,实在不行就写在html里面.order_details{margin-top:48px;}.order_details ul{margin:0px;padding:0px;border-bottom: 1px solid #b4b4b4;position: relative;}.order_details ul li{float: left;display: block;width: 150px;position: absolute;top:-24px;text-align: center;font-size: 17px;color: #2077d6}.order_details .checked{background-color: #fff;color: #636363;border:1px solid #b4b4b4;border-bottom:0 ;}.prepaids{position: absolute;left:75px;}.prepaids2{position: absolute;left:255px;}.prepaids3{position: absolute;left:413px;}.hidedomdiv{display: none}.showdomdiv{display: block;}.showsss{border:1px solid red;text-align: center;line-height: 100px;font-size:40px;}

4

对应的js部分如下所示,这里用的是jquery,非常简洁,但是要在之前引入一个jquery包,一般人都懂!

注意事项

样式中用到了定位,这个要注意点!

推荐信息