css 手写tab选项卡
来源：互联网 发布：车库数据er图 编辑：程序博客网 时间：2024/06/05 11:51
<!DOCTYPE html>
<html>
<head>
<include file="Public/icon"/>
<title> </title>
<style type="text/css">
/* 导航区 */
#cm_nav .Rebate .icon{ background-color:#da5455; color:#FFF; background-position:-240px -1597px;}
#primary{ margin: 15px;}
/* 说明区 */
#primary .biaoti,#primary .biaoti span{height:36px; line-height: 36px; font-size: 16px;}
#primary .biaoti{background:url(__PUBLIC__/img/icons1.png) 135px -423px no-repeat; margin-bottom: 15px;}
#primary .biaoti span{ display: block;float: left;}
#primary .biaoti .names{ width:136px; color:#fff; text-align: right; margin-right: 30px; background-color: #ed444b;}
#primary .remind{ height:60px; line-height:60px; background-color:#eee; color:#333; font-size:14px; padding-left: 15px;}
#primary .remind a{ display:inline-block; height:35px; line-height:35px; text-align:center; color:#fff; padding: 0 15px;
background-color:#00a030; margin:5px 10px auto 5px; }
#primary .data{ margin:50px auto ;}
#primary .button *{ float: left; color:#fff;}
.title2 {font-size: 20px;color: red;}
.title3 {font-size: 13px;color: black;margin-left:3%}
#primary .button .reset{ display: block; width: 200px; height:50px; line-height: 50px; text-align: center; background-color: #00a030;}
.tab-box{ overflow: hidden; zoom: 1; border: 1px #ccc solid;}
.tab-box-title{ height: 50px; border-bottom: 1px #ccc solid; background: #eee;}
.tab-box-title li:first-child{ margin-left: 20px;}
.tab-box-title li{ width: 140px; height: 49px; line-height: 49px; float: left; text-align: center; font-size: 18px; cursor:pointer;}
.tab-box-title li.cur{ background: #fff; height: 50px; line-height: 50px; border-left: 1px #ccc solid; border-right: 1px #ccc solid;}
.tab-box-content{ padding: 20px;}
</style>
</head>
<body>
<include file="Public/head"/>
<div class="breadcrumbs">
当前位置 ：
<a href="__MODULE__/Rebate/index">消费赠送管理</a>
>
<a href="__MODULE__/Rebate/configsetlist"> 返利档位预览</a>
</div>
<div id="primary">
<div class="biaoti">
<span class="names"><{$data['data']['grade']}>% 档位设置</span>
</div>
<div class="tab-box">
<ul class="tab-box-title">
<li class="cur">返利</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<div class="tab-box-content">
<div class="tab-box-cont">1</div>
<div class="tab-box-cont" style="display: none">2</div>
<div class="tab-box-cont" style="display: none">3</div>
<div class="tab-box-cont" style="display: none">4</div>
</div>
</div>
</div>
<include file="Public/foot"/>
<script type="text/javascript">
$(".tab-box-title").on("click", "li", function(){
var $this = $(this);
var index = $this.index();
$this.addClass("cur").siblings().removeClass("cur");
$(".tab-box-content").children().eq(index).show().siblings().hide();
})
</script>
</body>
</html>
<html>
<head>
<include file="Public/icon"/>
<title> </title>
<style type="text/css">
/* 导航区 */
#cm_nav .Rebate .icon{ background-color:#da5455; color:#FFF; background-position:-240px -1597px;}
#primary{ margin: 15px;}
/* 说明区 */
#primary .biaoti,#primary .biaoti span{height:36px; line-height: 36px; font-size: 16px;}
#primary .biaoti{background:url(__PUBLIC__/img/icons1.png) 135px -423px no-repeat; margin-bottom: 15px;}
#primary .biaoti span{ display: block;float: left;}
#primary .biaoti .names{ width:136px; color:#fff; text-align: right; margin-right: 30px; background-color: #ed444b;}
#primary .remind{ height:60px; line-height:60px; background-color:#eee; color:#333; font-size:14px; padding-left: 15px;}
#primary .remind a{ display:inline-block; height:35px; line-height:35px; text-align:center; color:#fff; padding: 0 15px;
background-color:#00a030; margin:5px 10px auto 5px; }
#primary .data{ margin:50px auto ;}
#primary .button *{ float: left; color:#fff;}
.title2 {font-size: 20px;color: red;}
.title3 {font-size: 13px;color: black;margin-left:3%}
#primary .button .reset{ display: block; width: 200px; height:50px; line-height: 50px; text-align: center; background-color: #00a030;}
.tab-box{ overflow: hidden; zoom: 1; border: 1px #ccc solid;}
.tab-box-title{ height: 50px; border-bottom: 1px #ccc solid; background: #eee;}
.tab-box-title li:first-child{ margin-left: 20px;}
.tab-box-title li{ width: 140px; height: 49px; line-height: 49px; float: left; text-align: center; font-size: 18px; cursor:pointer;}
.tab-box-title li.cur{ background: #fff; height: 50px; line-height: 50px; border-left: 1px #ccc solid; border-right: 1px #ccc solid;}
.tab-box-content{ padding: 20px;}
</style>
</head>
<body>
<include file="Public/head"/>
<div class="breadcrumbs">
当前位置 ：
<a href="__MODULE__/Rebate/index">消费赠送管理</a>
>
<a href="__MODULE__/Rebate/configsetlist"> 返利档位预览</a>
</div>
<div id="primary">
<div class="biaoti">
<span class="names"><{$data['data']['grade']}>% 档位设置</span>
</div>
<div class="tab-box">
<ul class="tab-box-title">
<li class="cur">返利</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<div class="tab-box-content">
<div class="tab-box-cont">1</div>
<div class="tab-box-cont" style="display: none">2</div>
<div class="tab-box-cont" style="display: none">3</div>
<div class="tab-box-cont" style="display: none">4</div>
</div>
</div>
</div>
<include file="Public/foot"/>
<script type="text/javascript">
$(".tab-box-title").on("click", "li", function(){
var $this = $(this);
var index = $this.index();
$this.addClass("cur").siblings().removeClass("cur");
$(".tab-box-content").children().eq(index).show().siblings().hide();
})
</script>
</body>
</html>
阅读全文
0 0
- css 手写tab选项卡
- css tab选项卡
- TAB选项卡效果（DIV+CSS ）
- 【自我作业】JS+CSS tab选项卡
- 简洁css竖型tab选项卡(用)
- CSS实例：Tab选项卡效果
- CSS tab选项卡(标签页)切换
- CSS tab 选项卡(兼容好)
- HTML CSS +js 实现tab选项卡，自动轮换
- 纯css制作tab选项卡（一）
- 纯css制作tab选项卡（二）
- 选项卡手写不用插件
- 简单选项卡TAB
- 自定义Tab选项卡
- 个性TAB选项卡
- html tab选项卡
- Tab选项卡
- 自定义Tab选项卡
- 正三角形的外接圆面积
- js读/写 本地txt文件
- HDU 6034 Balala Power! 【模拟】【大数高精度】
- 百练_4004:数字组合
- Netty——ChannelOption
- css 手写tab选项卡
- row_number()、rank()和dense_rank()的区别以及具体使用
- Java抓屏程序代码
- 二叉排序树
- Linux centos7 安装Nginx
- spring 线程问题
- ora-01034和ora-27101
- Linux下Mysql忘记密码如何登陆并修改密码
- 有环链表相关
