tab菜单栏实现

最新推荐文章于 2023-12-23 00:18:35 发布

qq_35280696

最新推荐文章于 2023-12-23 00:18:35 发布

阅读量701

点赞数

本文链接：https://blog.csdn.net/qq_35280696/article/details/91382069

版权

菜单栏简单实现

效果图如下

在这里插入图片描述

菜单按钮部分

    <div class="menu">
        <div class="menu-wrap">
            <a class="row active">
                签领
            </a>
            <a class="row">
                盘点
            </a>
            <a class="row">
                变动
            </a>
            <a class="row">
                带领
            </a>
            <a class="row ">
                退库
            </a>
        </div>
        <div class="middle">

主体内容

        <div class="middle">
            <div class="middle1" style="display: block">
                <a href="#" class="wrapa">
                    <div class="content-wrap">
                        <a href="#" class="wrapa">
                            <div class="content1">
                                <div class="yuan">1</div>
                                <div class="row">
                                    <span class="wz1">设备编号</span>
                                    <span class=" wz2">2019004224</span>
                                </div>
                                <div class="row">
                                    <span class="wz1">申请内容</span>
                                    <span class="wz2">打印机一台</span>
                                </div>
                                <div class="row">
                                    <span class="wz1">领用人</span>
                                    <span class="wz2">张三</span>
                                </div>
                                <div class="row">
                                    <span class="wz1">工作状态</span>
                                    <span class="wz2 status">在办</span>
                                </div>
                                <div class="rjt"></div>
                            </div>
                        </a>
                        <a href="#" class="wrapa">
                            <div class="content2">
                                <div class="yuan">1</div>
                                <div class="row">
                                    <span class="wz1">设备编号</span>
                                    <span class=" wz2">2019004224</span>
                                </div>
                                <div class="row">
                                    <span class="wz1">申请内容</span>
                                    <span class="wz2">打印机一台</span>
                                </div>
                                <div class="row">
                                    <span class="wz1">领用人</span>
                                    <span class="wz2">张三</span>
                                </div>
                                <div class="row">
                                    <span class="wz1">工作状态</span>
                                    <span class="wz2 status">在办</span>
                                </div>
                                <div class="rjt"></div>
                            </div>
                        </a>
                        <a href="#" class="wrapa">
                            <div class="content3">
                                <div class="yuan">1</div>
                                <div class="row">
                                    <span class="wz1">设备编号</span>
                                    <span class=" wz2">2019004224</span>
                                </div>
                                <div class="row">
                                    <span class="wz1">申请内容</span>
                                    <span class="wz2">打印机一台</span>
                                </div>
                                <div class="row">
                                    <span class="wz1">领用人</span>
                                    <span class="wz2">张三</span>
                                </div>
                                <div class="row">
                                    <span class="wz1">工作状态</span>
                                    <span class="wz2 status">在办</span>
                                </div>
                                <div class="rjt"></div>
                            </div>
                        </a>
                    </div>
            </div>
            <div class="middle2">我是第二页</div>
            <div class="middle3">我是第三页</div>
            <div class="middle4">我是第四页</div>
            <div class="middle5">我是第五页</div>
    </div>        
    </div>

js部分

$(function () {
    $('.menu-wrap .row').click(function () {
        $(this).addClass('active').siblings().removeClass('active');
        $('.middle>div').eq($(this).index()).show().siblings().hide();
    });
})

微信底部菜单栏实现

菜单栏主体代码

	<div class="footer">
		<a href="###" class="tab">
			<img class="menu_img" data-imgname="tab1"/>
			<div>首页</div>
		</a>
		<a href="###" class="tab">
			<img class="menu_img" data-imgname="tab2"/>
			<div>资产管理</div>
		</a>
		<a href="###" class="tab">
			<img class="menu_img" data-imgname="tab3"/>
			<div>驾驶舱</div>
		</a>
		<a href="###" class="tab">
			<img class="menu_img" data-imgname="tab4"/>
			<div>知识库</div>
		</a>
		<a href="###" class="tab">
			<img class="menu_img" data-imgname="tab5"/>
			<div>我的</div>
		</a>
	</div>

js代码

$(function () {
    $(".tab>img").each(function () {
        var name = $(this).attr("data-imgname");
        var src = "../images/" + name + ".png"
        $(this).attr("src", src);
    });
    $('.footer .tab').click(function () {
        $(this).addClass('cur').siblings().removeClass('cur');
        $(".tab>img").each(function () {
            var name = $(this).attr("data-imgname");
            var src = "../images/" + name + ".png"
            $(this).attr("src", src);
        });
        var name1 = $(this).children("img").attr("data-imgname");
        var src1 = "../images/" + name1 + "-cur.png"
        $(this).children("img").attr("src", src1);
    });
    $('.footer .tab')[0].click();
})