您的位置：首页 > 其它

Tab选项卡功能以及单选复选功能

2016-11-03 08:23 99 查看

HTML

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
<title>修改正文排版</title>
<link rel="stylesheet" type="text/css" href="../css/main.css">
<link rel="stylesheet" type="text/css" href="../css/ebookMaker/wxPictureVersionModule.css">
<script src="../js/jquery-1.8.3.min.js"></script>
<script src="../js/Sortable.min.js"></script>
</head>
<body>

<div class="Top">
<a href="wxPictureCutpicAdd.html" class="BtnCancel">取消</a>
<a href="javascript:void(0)" class="BtnInsert" ><div class="EditOrd">插入</div></a>
<h1>板式模块</h1>
</div>
<div class="wxPictureVersionModule">
<div class="TabListContent">
<ul class="TabList">
<li class="selected Commonliend"><a><h3>图文</h3></a></li>
<li class="Commonliend"><a><h3>标题</h3></a></li>
<li class="Commonliend"><a><h3>正文</h3></a></li>
<li class="Commonliend"><a><h3>背景</h3></a></li>
<li class="Commonliend"><a><h3>分割线</h3></a></li>
<li class="Commonliend"><a><h3>小符号</h3></a></li>


</ul>
</div>


<div class="TabListItem">
<div class="ListItem">
<div class="ListItem1">
<div class="ItemIcon">
<img src="../css/images/../images/Mobile_bg0302.png">
</div>
</div>
</div>
<div class="ListItem">
<div class="ListItem1-2" >
<div class="ItemIcon">
<img src="../css/images/../images/Mobile_bg0304.png">
</div>
</div>
</div>
</div>

<div class="TabListItem" style="display: none">
<div class="ListItem">
<div class="ListItem1">
<div class="ItemIcon">
标题
</div>
</div>
</div>
</div>

<div class="TabListItem" style="display: none">
<div class="ListItem">
<div class="ListItem1">
<div class="ItemIcon">
正文
</div>
</div>
</div>
</div>

<div class="TabListItem" style="display: none">
<div class="ListItem">
<div class="ListItem1">
<div class="ItemIcon">
背景
</div>
</div>
</div>
</div>

<div class="TabListItem" style="display: none">
<div class="ListItem">
<div class="ListItem1">
<div class="ItemIcon">
分割线
</div>
</div>
</div>
</div>

<div class="TabListItem" style="display: none">
<div class="ListItem">
<div class="ListItem1">
<div class="ItemIcon">
小符号
</div>
</div>
</div>
</div>
</div>

<script type="text/javascript">
$(document).ready(function(){
$(".ListItem").click(function(){
//如果已经被选中
if($(this).find(".ItemIcon").hasClass("SelectedItem")){
$(this).find(".ItemIcon").removeClass("SelectedItem");
$(this).find(".ItemIcon").css("border","1px solid #efeff4");
}
//如果没被选中
else{
$(".ListItem").eq($(this).index()).find(".ItemIcon").css("border","1px solid #f43530");
$(".ListItem").eq($(this).index()).find(".ItemIcon").addClass("SelectedItem");
}
});
/*Tab选项卡*/
$(".TabList li").click(function(){
$(".TabList li").eq($(this).index()).addClass("selected").siblings().removeClass('selected');
$(".TabListItem").hide().eq($(this).index()).show();
});
});
</script>
</body>
</html>

单选功能
$(".ListItem").find(".ItemIcon").removeClass("SelectedItem");
$(".ListItem").eq($(this).index()).find(".ItemIcon").addClass("SelectedItem");

CSS

body{
margin:0px auto;
background:#efeff4;
position:relative;
display:block;
padding:44px 0px 64px 0px;
height: 100%;
}
/* 头部样式 */
.Top .BtnInsert{
height:44px;
float:right;
padding-right:10px;
font-size:16px;
color:#228924;
line-height:44px;
}
.Top .BtnCancel{
height:44px;
line-height:44px;
float:left;
padding-left:10px;
background-size:12px 20px;
color:#d6d6d7;
font-size:16px;
}
.wxPictureVersionModule{
width: 100%;
}
/*Tab选项卡*/
.wxPictureVersionModule .TabListContent{
width: 72px;
position: fixed;
bottom: 0px;
top: 44px;
left: 0px;
overflow:auto;
overflow-x:hidden;
}
.wxPictureVersionModule .TabList{
width:68px;
height:100%;
background-color:#ffffff;
font-size: 16px;
line-height: 44px;
border-right:1px solid #d9d9d9;
}
.wxPictureVersionModule .TabList .selected{
border-left:2px solid #f43530;
background-color:#efeff4;
border-right:none;
color: #f43530;
}

.wxPictureVersionModule .TabList .selected a{
color: #f43530;
}

.wxPictureVersionModule .TabList li{
width:67px;
height:44px;
border:1px solid #d9d9d9;
background-color:#ffffff;
border-top: none;

}

.wxPictureVersionModule .TabList h3{
padding-left: 10px;
font-size: 16px;
}

.Liend {
border-bottom:1px solid #efeff4;
}

/*图文1-1*/
.TabListItem{
overflow: hidden;
zoom: 1;
}
.TabListItem .ListItem1{
margin-top: 10px;
margin-left: 82px;
margin-right: 10px;
}

.TabListItem .ListItem1 .ItemIcon{
border: 1px solid #efeff4;
position: relative;
}

.TabListItem .ListItem1 .ItemIcon img{
width: 100%;
height: auto;
vertical-align: middle;
}

.TabListItem .SelectedItem{
border: 1px solid #f43530;

}

.TabListItem .ListItem1 .SelectedItem:after{
content: "";
width: 22px;
height: 22px;
position: absolute;
right: 0px;
bottom: 0px;
background: url("../images/Mobile_bg0303.png") right bottom no-repeat;
background-size: 22px 22px;
width: 100%;
}

@media(min-width:600px){
.TabListItem .ListItem1 .ItemIcon{
width:275px;
margin: 0 auto;
position: relative;
}

.TabListItem .SelectedItem{
border: 1px solid #f43530;
}
.TabListItem .ListItem1 .SelectedItem:after{
content: "";
width: 22px;
height: 22px;
position: absolute;
right: 0px;
bottom: 0px;
background: url("../images/Mobile_bg0303.png") right bottom no-repeat;
background-size: 22px 22px;
width: 100%;
}
}

/*图文1-2*/

.TabListItem .ListItem1-2{
margin-top: 10px;
margin-left: 82px;
margin-right: 10px;
}

.TabListItem .ListItem1-2 .ItemIcon{
border: 1px solid #efeff4;
position: relative;

}

.TabListItem .ListItem1-2 .ItemIcon img{
width: 100%;
height:auto;
vertical-align: middle;
}

.TabListItem .SelectedItem{
border: 1px solid #f43530;

}

.TabListItem .ListItem1-2 .SelectedItem:after{
content: "";
width: 22px;
height: 22px;
position: absolute;
right: 0px;
bottom: 0px;
background: url("../images/Mobile_bg0303.png") right bottom no-repeat;
background-size: 22px 22px;
width: 100%;
}

@media(min-width:600px){
.TabListItem .ListItem1-2 .ItemIcon{
width:275px;
margin: 0 auto;
position: relative;
}

.TabListItem .SelectedItem{
border: 1px solid #f43530;
}
.TabListItem .ListItem1-2 .SelectedItem:after{
content: "";
width: 22px;
height: 22px;
position: absolute;
right: 0px;
bottom: 0px;
background: url("../images/Mobile_bg0303.png") right bottom no-repeat;
background-size: 22px 22px;
width: 100%;
}
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航