设置tab标签页 遮挡部分
效果如下:

主要代码:
<div class="need-detail">
<div class="top-title">
<span data-index=0 class="curr">搜索<b>×</b></span>
<span data-index=1>商详<b>×</b></span>
</div>
<div class="tab-content"></div>
</div>
对应的css
.need-detail{
.top-title{
height: 39px;/*必须设置高度*/
span{
float: left;/*设置浮动,保证层级高于下面的tab切换框*/
width: 82px;
height: 38px;
line-height: 38px;
border: 1px solid #e5e7ea;
border-bottom: 0px;
background: #fff;/*设置白色 这样往下移动的时候覆盖下面颜色*/
}
.curr{
height: 39px;/*高于没有选择的div*/
}
}
.tab-content{
border: 1px solid #e5e7ea;
height: 300px;
}
}
设置tab标签页 遮挡部分的更多相关文章
- jquery插件之tab标签页或滑动门
该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的tab标签页或滑动门特效,在此插件中默认使用的是鼠标滑过 ...
- 如何一行jquery代码写出tab标签页(链式操作)
啦啦!今天又学了一招,js写几十行的tab标签页jquery写一行就行啦,用到了链式操作!以下是代码: <!DOCTYPE html> <html lang="en&quo ...
- Bootstrap插件——(Tab)标签页
项目中用到了Bootstrap的(Tab)标签页插件,记录如下: 代码如下: <div class="tabbable"> <ul class="nav ...
- Easyui 关闭jquery-easui tab标签页前触发事件
关闭jquery-easui tab标签页前触发事件 by:授客 QQ:1033553122 测试环境 jquery-easyui-1.5.3 需求场景 点击父页面tab 页关闭按钮时,需要做判断,判 ...
- 在Bootstrap开发中解决Tab标签页切换图表显示问题
在做响应式页面的时候,往往需要考虑更多尺寸设备的界面兼容性,一般不能写死像素,以便能够使得界面元素能够根据设备的不同进行动态调整,但往往有时候还是碰到一些问题,如Tab标签第一页面正常显示,但是切换其 ...
- VIM 实现tab标签页及分屏,切换命令
1,在一个窗口中,VIM 的小tab标签页命令: :tabnew [++opt选项] [+cmd] 文件 建立对指定文件新的tab :tabc 关闭当前的tab ...
- pyqt 设置QTabWidget标签页不可选
pyqt 设置QTabWidget标签页不可选 for i in range(1,7): self.tabWidget.setTabEnabled(i,False)i-对应标签页的位数
- ExtJS配置TabPanel可以拖拽Tab标签页
1.环境说明 ExtJS版本:7.4.0.42 Sencha Cmd: v7.5.1.20 开发工具:WebStorm 2022.1.1 PS:如果是老版本的ExtJS,引入Ext.ux.TabReo ...
- 整理用js实现tab标签页
首先是css样式,比如这样的: <style> *{ ; ; list-style: none; font-size: 12px; } .notice{ width: 298px; hei ...
随机推荐
- R语言plot函数参数合集
最近用R语言画图,plot 函数是用的最多的函数,而他的参数非常繁多,由此总结一下,以供后续方便查阅. plot(x, y = NULL, type = "p", xlim = N ...
- 绑定任意格式的XML文档到WPF的TreeView
Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/--> ...
- Confluence 6 为用户管理连接 Confluence 到 Crowd
你可以连接你的 Confluence 应用程序到 Atlassian Crowd 或 a Jira (5.3 及后续版本)来管理你的用户和用户组以及针对他们的授权. Atlassian Crowd 是 ...
- [Spring Boot] 使用多个Servlet
当使用Spring boot的嵌入式servlet容器时,可以通过Spring bean或扫描Servlet组件的方式注册Servlet.Filter和Servlet规范的所有监听器(例如HttpSe ...
- office每次打开都要重新配置
office每次打开都要重新配置 1● 找到路径 C:\Program Files\Common Files\microsoft shared\OFFICE14\Office Setup Co ...
- URAL 1941
比赛的时候三个点没有优化成功.其实也没有想到哈希成数.然后就变成了只要一个长度和scary相等的区间内所有数字个数都是相等的.那么就是符合题意的.于是.为了不TLE我们不能对txt每个位置遍历 的同时 ...
- python break continue跳过和跳出循环
break 语句可以跳出 for 和 while 的循环体.continue语句被用来告诉Python跳过当前循环块中的剩余语句,然后继续进行下一轮循环.用break continue 写一个乘法表下 ...
- 基于GUI的简单聊天室01
运用了Socket编程,gui,流的读入和写出,线程控制等 思路: 1.首先是在客户端中先建立好聊天的GUI 2.建立服务器端,设置好端口号(用SocketServer),其中需要两个boolean变 ...
- DevExpress v17.2新版亮点—DevExtreme篇(二)
用户界面套包DevExpress DevExtreme v17.2终于正式发布,本站将以连载的形式为大家介绍各版本新增内容.本文将介绍了DevExtreme v17.2 的New Color Sche ...
- 关于Predynastic Egypt
游戏界面(资源增加工人,工人产生资源) 解锁建筑(花费资源增加某一地区产出) 神灵祭祀(献祭资源获得临时buff,如减少建筑时间,一定回合内减少入侵几率,增加粮食产出,减少消耗资源等) 解锁科技(增加 ...