简单的tab栏切换及遮罩效果demo

整理了一下工作中用到的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>

tab切换效果图1

tab切换效果图2

遮罩效果图1

遮罩效果图2

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值