jcqy_nwq.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="static/js/jquery-1.8.1.min.js" type=text/javascript></script>
    <script src="static/js/rem.js"></script>
    <link rel="stylesheet" type="text/css" href="static/css/common.css" />
    <link rel="stylesheet" type="text/css" href="static/css/commonArea.css" />
    <title>上海市人民检察院</title>
</head>
<style type="text/css">
    .content {
        background: url(static/images/workshop_bg.png);
        width: 100%;
        min-height: 100vh;
        background-position-x: center;
    }
    
    .content_box {
        width: 13rem;
        height: 8.8rem;
        background: rgba(0, 0, 0, 0.5);
        border-radius: 10px;
    }
</style>
<script type="text/javascript">
    $(function() {
        // 1、点击上面的li，当前点击的li添加current类，其余兄弟移除类
        $(".tab_list li").click(function() {
            // 链式编程  当前li添加类，其余兄弟移除类
            $(this).addClass('current').siblings().removeClass('current');
            // 2、拿到当前点击的索引号
            var index = $(this).index();
            // 3、下面index对应的模块显示，其余的item隐藏
            $(".tab_con .item").eq(index).show().siblings().hide();
        })
    });
</script>

<body>
    <div class="content">
        <div class="flex-box padding_box">
            <div class="menu_box">
                <div class="menu_title_box">北车间</div>
                <div class="tab_list">
                    <ul>
                        <li class="current">
                            <div class="flex-box">
                                <p>一楼</p>
                                <p class="monitor">监控点<span>28</span></p>
                            </div>
                        </li>
                        <li>
                            <div class="flex-box">
                                <p>二楼</p>
                                <p class="monitor">监控点<span>28</span></p>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="content_box">

            </div>
        </div>
    </div>
</body>

</html>