设置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 ... 
随机推荐
- 20170517xlVBA添加数据透视表
			Sub AddPovitTable() 'Constance Const DATA_SHEET As String = "Advanced Filter" Const DATA_A ... 
- android--------Android Studio常见问题以及解决方式
			gradle build的时候出现的问题: Error:Execution failed for task ':app:packageDebug'. Duplicate files copied in ... 
- android--------AndroidStudio 关闭 Install Run
			前面讲热修复的时候说到了一个 AndroidStudio关闭Instant Run的问题 ,今天来简单的写一下. Android Studio 工具中是有很多好东西的,要全部的知道的话,还是要下点功夫 ... 
- android--------listview之适配器
			ListView之适配器的使用,包含了ArrayAdapter,SimpleAdapter ,BaseAdapter等适配器. 1:ArrayAdapter /**** * * * ArrayAdap ... 
- 41  MYSQL  索引和慢查询优化
			一 .索引mysql 索引 b+tree 本质:通过不断地缩小想要获取数据的范围来筛选出最终想要的结果,同时把随机的事件变成顺序的事件,也就是说,有了这种索引机制,我们可以总是用同一种查找方式来锁定数 ... 
- RMQ板子
			对于RMQ这种静态最值询问, 用线段树的话查询过慢, 一般用ST表预处理后O(1)查询, 下以最大值查询为例, 这里假定$n$不超过5e5 void init() { Log[0] = -1; REP ... 
- chrome plugins
			ehpomnigmfglbkmnboidmmhhmicfdmom_1_1_0知行-时间管理 必开 Adkill and Media Download Cnblogs Wz(博客园网摘) Kami - ... 
- 纯js倒计时效果(交流加群:452892873)(本群每天都更新学习资料)
			<!doctype html> <html> <head> <meta charset="utf-8"> <title> ... 
- JS之Fetch
			细节叙述见以下链接:https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch 1 基本概念: WindowOrWo ... 
- 官网下载的spring-framework的一些描述
			刚下载下来是这个文件夹: 
