效果如下:

主要代码:

<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标签页 遮挡部分的更多相关文章

  1. jquery插件之tab标签页或滑动门

    该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的tab标签页或滑动门特效,在此插件中默认使用的是鼠标滑过 ...

  2. 如何一行jquery代码写出tab标签页(链式操作)

    啦啦!今天又学了一招,js写几十行的tab标签页jquery写一行就行啦,用到了链式操作!以下是代码: <!DOCTYPE html> <html lang="en&quo ...

  3. Bootstrap插件——(Tab)标签页

    项目中用到了Bootstrap的(Tab)标签页插件,记录如下: 代码如下: <div class="tabbable"> <ul class="nav ...

  4. Easyui 关闭jquery-easui tab标签页前触发事件

    关闭jquery-easui tab标签页前触发事件 by:授客 QQ:1033553122 测试环境 jquery-easyui-1.5.3 需求场景 点击父页面tab 页关闭按钮时,需要做判断,判 ...

  5. 在Bootstrap开发中解决Tab标签页切换图表显示问题

    在做响应式页面的时候,往往需要考虑更多尺寸设备的界面兼容性,一般不能写死像素,以便能够使得界面元素能够根据设备的不同进行动态调整,但往往有时候还是碰到一些问题,如Tab标签第一页面正常显示,但是切换其 ...

  6. VIM 实现tab标签页及分屏,切换命令

    1,在一个窗口中,VIM 的小tab标签页命令:   :tabnew [++opt选项] [+cmd] 文件            建立对指定文件新的tab :tabc       关闭当前的tab ...

  7. pyqt 设置QTabWidget标签页不可选

    pyqt 设置QTabWidget标签页不可选 for i in range(1,7): self.tabWidget.setTabEnabled(i,False)i-对应标签页的位数

  8. ExtJS配置TabPanel可以拖拽Tab标签页

    1.环境说明 ExtJS版本:7.4.0.42 Sencha Cmd: v7.5.1.20 开发工具:WebStorm 2022.1.1 PS:如果是老版本的ExtJS,引入Ext.ux.TabReo ...

  9. 整理用js实现tab标签页

    首先是css样式,比如这样的: <style> *{ ; ; list-style: none; font-size: 12px; } .notice{ width: 298px; hei ...

随机推荐

  1. 20170711xlVBA批量制图一例

    Public Sub GatherDataPicker() Application.ScreenUpdating = False Application.DisplayAlerts = False A ...

  2. 3-19(晚) require_relative 和 require. === operator的解释。

    kernel#require_relative Ruby tries to load the library named string relative to the requiring file's ...

  3. python中的注意事项

    .python 中的 and 从左到右计算表达式,若所有值均为真,则返回最后一个值,若存在假,返回第一个假值: or 也是从左到有计算表达式,返回第一个为真的值: 其中数字 0 是假,其他都是真: 字 ...

  4. HDU-4850 Wow! Such String! (构造)

    Problem Description Recently, doge starts to get interested in a strange problem: whether there exis ...

  5. POJ-2251 Dungeon Master (BFS模板题)

    You are trapped in a 3D dungeon and need to find the quickest way out! The dungeon is composed of un ...

  6. quartz---的Scheduler

    quartz---的Scheduler 从这副图中可以很直观的看出来quartz的关系: 调度:Scheduler任务调度器,是实际执行任务调度的控制器.在spring中通过SchedulerFact ...

  7. c语言枚举类型变量的作用

    #include<stdio.h> enum DAY { MON=, TUE, WED, THU, FRI, SAT, SUN }; int main() { enum DAY day; ...

  8. Java通过class文件得到所在jar包

    今天遇到一个问题,需要通过知道的class文件得到该文件所在的jar包,试过很多办法都不行,最后在网上找到了一个解决办法,如下: demo.java 1 2 String path = XXX.cla ...

  9. 玩转X-CTR100 | X-Assistant串口助手控制功能

      更多塔克创新资讯欢迎登陆[塔克社区 www.xtark.cn ][塔克博客 www.cnblogs.com/xtark/ ]       X-CTR100控制器配套的X-Assistant串口调试 ...

  10. DevExpress WPF入门指南:如何自动或手动添加DXSplashScreen控件

    <DevExpress v17.2 版本更新公开课>点击报名 DevExpress WPF 的 DXSplashScreen 控件在应用加载的时候显示一个启动界面.添加DXSplashSc ...