设置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 ...
随机推荐
- Java数据类型转换(自动转换和强制转换)
数据类型的转换,分为自动转换和强制转换.自动转换是程序在执行过程中“悄然”进行的转换,不需要用户提前声明,一般是从位数低的类型向位数高的类型转换;强制类型转换则必须在代码中声明,转换顺序不受限制. 自 ...
- English trip -- VC(情景课)3 C Do you have a sister?(maple verstion)
xu言: 温故而知新,可以为师矣.不要小瞧重复的东西,不同的老师,不同的角度,不同的方法.你就会掌握不同的知识~ Review what you have learned and get someth ...
- Andriod的Http请求获取Cookie信息并同步保存,使第二次不用登录也可查看个人信息
Android使用Http请求登录,则通过登录成功获取Cookie信息并同步,可以是下一次不用登录也可以查看到个人信息, 注:如果初始化加载登录,可通过缓存Cookie信息来验证是否要加载登录界面.C ...
- $LANG、$NLS_LANG 记录一下
环境:linux $LANG 为linux termal终端环境下的 语言环境 $NLS_LANG 为oracle数据库中 会话中的语言环境. 个人理解,望大家补充
- javascript--- document.write()和 innerHTML的区别
document.write是直接写入到页面的内容流,如果在写之前没有调用document.open, 浏览器会自动调用open.每次写完关闭之后重新调用该函数,会导致页面被重写. innerHTML ...
- 感知器、logistic与svm 区别与联系
https://blog.csdn.net/m0_37786651/article/details/61614865 从感知器谈起 对于典型的二分类问题,线性分类器的目的就是找一个超平面把正负两类分开 ...
- RabbitMQ特性
使用默认的exchange channel.basicPublish("", QUEUE_NAME, null, message.getBytes()); 如果用空字符串去申明一个 ...
- System.Web.Caching
System.Web.Caching简单封装类: using System; using System.Collections.Generic; using System.Web.Caching; u ...
- 玩转X-CTR100 l STM32F4 l CAN通信
我造轮子,你造车,创客一起造起来!塔克创新资讯[塔克社区 www.xtark.cn ][塔克博客 www.cnblogs.com/xtark/ ] X-CTR100控制器STM32F4处理器内置CAN ...
- 使用MyEclipse开发Java EE应用:EJB项目开发初探(下)
你开学,我放价!MyEclipse线上狂欢继续!火热开启中>> [MyEclipse最新版下载] 三.EJB 3.x项目中的持久性支持 当创建EJB 3.x项目时,作为选项您可以添加JPA ...