整理了一下工作中用到的tab栏切换和遮罩效果,是用jQuery实现的,供参考,如果不足,欢迎指正~
代码部分:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width,user-scalable=no" name="viewport">
<title>Demo</title>
<style>
html, body, h3 {
padding: 0;
margin: 0;
}
ul {
list-style: none;
padding: 0;
margin: 0;
overflow: hidden;
}
ul li {
padding: 0;
margin: 0;
}
.fl {
float: left;
}
.hide {
display: none;
}
a {text-decoration: none; color: #777}
.header {
position: relative;
height: 56px;
line-height: 56px;
background: #76B610;
width:100%;
z-index:400;
text-align: center;
}
.return {
position: absolute;
left: 10px;
top: 0px;
color: #fff;
}
.header h3 {
font-size: 20px;
color: #FFF;
}
.header .button {
position: absolute;
top: 0px;
right: 10px;
font-size: 16px;
color: #fff;
}
.navbox {
background-color: #fff;
font-size: 16px;
color: #666;
}
.navbox a {
display: block;
width: 50%;
text-align: center;
line-height: 40px;
height: 44px;
}
.navbox li {
margin: 0 28px;
}
.navbox a.current li {
border-bottom: solid 4px #76B610;
}
.navbox a.current {
color: #76B610;
}
.listBox a {
display: block;
background-color: #fff;
}
.listBox li {
padding: 10px 0 10px;
border-bottom: 1px solid #E6E6E6;
box-sizing: border-box;
}
.listBox b {
padding-right: 4px;
}
.listBox a {
height: auto;
line-height: 26px;
}
.listBox li {
padding-right: 12px;
overflow: hidden;
}
.listBox {
font-size: 16px;
color: #666;
}
.right {
padding-right: 10px;
background-size: 6px 11px;
float: right;
}
.bigbox {
position: relative;
margin-top: 12px;
}
.listBox .box-wrap {
position: relative;
padding-left: 12px;
}
.mask {
background: rgba(54,117,7,.4);
width: 100%;
height: 100%;
position: absolute;
top: 0;
right: 0;
z-index: 90;
}
.listBox .nocircle {
border: 1px solid #76B610;
width: 14px;
height: 14px;
position: absolute;
top: 50%;
right: 7px;
margin-top: -7px;
background-color: #ccc;
z-index: 100;
}
.listBox .circle {
background-color: #76B610;
}
.other {
position: static;
float: right;
color: #76B610;
margin-right: 18px;
font-size: 14px;
line-height: 100px !important;
}
.deleteBtn {
position: fixed;
bottom: 0;
background: #fff;
width: 100%;
max-width: 800px;
height: 46px;
line-height: 46px;
text-align: center;
color: #76B610;
font-size: 16px;
z-index: 130;
}
</style>
</head>
<body>
<header class="header">
<h3>Demo</h3>
<span onclick="editBtn(this)" class="button">编辑</span>
</header>
<nav class="navbox">
<ul class="clearfix">
<a onclick="changeNav(this)" class="fl current" href="javascript:;">
<li>导航1</li>
</a>
<a onclick="changeNav(this)" class="fl" href="javascript:;">
<li>导航2</li>
</a>
</ul>
</nav>
<main class="bigbox">
<div class="mask hide"></div>
<section class="listBox">
<ul>
<a class="box-wrap" href="javascript:;">
<span onclick="changeCircle(this)" class="nocircle hide"></span>
<li class="clearfix">
<span class="left fl">这里是一大堆字</span>
<span class="right fr">更多</span>
</li>
</a>
<a class="box-wrap" href="javascript:;">
<span onclick="changeCircle(this)" class="nocircle hide"></span>
<li class="clearfix">
<span class="left fl">这里是一大堆字</span>
<span class="right fr">更多</span>
</li>
</a>
<a class="box-wrap" href="javascript:;">
<span onclick="changeCircle(this)" class="nocircle hide"></span>
<li class="clearfix">
<span class="left fl">这里是一大堆字</span>
<span class="right fr">更多</span>
</li>
</a>
</ul>
<a href="javascript:;" class="other">查看其它内容</a>
</section>
<section class="listBox hide">
<ul>
<a class="box-wrap" href="javascript:;">
<span onclick="changeCircle(this)" class="nocircle hide"></span>
<li class="clearfix">
<span class="left fl">这里是第二部分的字请注意</span>
<span class="right fr">更多</span>
</li>
</a>
<a class="box-wrap" href="javascript:;">
<span onclick="changeCircle(this)" class="nocircle hide"></span>
<li class="clearfix">
<span class="left fl">这里是第二部分的字请注意</span>
<span class="right fr">更多</span>
</li>
</a>
<a class="box-wrap" href="javascript:;">
<span onclick="changeCircle(this)" class="nocircle hide"></span>
<li class="clearfix">
<span class="left fl">这里是第二部分的字请注意</span>
<span class="right fr">更多</span>
</li>
</a>
</ul>
<a href="javascript:;" class="other">查看其它内容</a>
</section>
<section onclick="deleteBtn(this)" class="deleteBtn hide">移除</section>
</main>
<script src="jquery.js"></script>
<script>
// 隐藏 遮罩 圆圈 删除按钮
function hideMore() {
$(".mask").hide();
$(".nocircle").hide();
$(".deleteBtn").hide();
}
hideMore();
// 显示遮罩 圆圈
function showMore() {
$(".mask").show();
$(".nocircle").show();
}
function wrapBoxLen() {
var wrapBox = $(".listBox:visible .box-wrap");
var wrapBoxLen = $(wrapBox).length;
return wrapBoxLen;
}
// 点击编辑
function editBtn() {
if (wrapBoxLen() == 0) {
alert("没有要删除的内容")
return;
}
// 获取编辑菜单的文本
var thisStr = $(".button").html();
if (thisStr == "完成") {
$(".button").html("编辑");
$(".nocircle").removeClass("circle");
hideMore();
} else if (thisStr == "编辑") {
$(".button").html("完成");
showMore();
}
}
function deleteBtn(obj) {
$(".circle").parent("a").remove();
$(obj).hide();
hideMore();
$(".button").html("编辑");
}
function changeCircle(obj) {
$(obj).toggleClass("circle");
if ($(obj).hasClass("circle")){
$(".deleteBtn").show();
} else if($(".nocircle").hasClass("circle") == false) {
$(".deleteBtn").hide();
}
}
function changeNav(obj) {
// 获取编辑文本
var thisStr = $(".button").html();
if (thisStr == "完成") {
$(".button").html("编辑");
$(".nocircle").removeClass("circle");
hideMore();
}
$(obj).addClass("current").siblings("a").removeClass("current");
// tab 切换
var index = $(obj).index();
var listBox = $(obj).parents(".navbox").siblings(".bigbox").children(".listBox");
$(listBox).eq(index).show();
$(listBox).eq(index-1).hide();
}
</script>
</body>
</html>