jQuery 遍历 - siblings() 方法应用

每天写个小demo,最近工作小到1像素,大到n多优化,这个行业真的是有项目的时候忙的要死,没项目的时候闲的发慌,趁着办公室没人的时候,安安静静继续写代码,一个关于jQuery 遍历 - siblings() 方法应用。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title></title>
        <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
        <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
        <script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
        <style>
            #statsclick {
                border-bottom: 2px solid #2da5e4;
                color: #2da5e4;
                border-radius: 0px;
                width: 100%;
                height: 35px;
                line-height: 29px;
                display: block;
            }
            
            #stopclick {
                color: #999;
                border: none;
                width: 100%;
                height: 35px;
                line-height: 29px;
                display: block;
            }
            
            #dangerclick {
                color: #999;
                border: none;
                width: 100%;
                height: 35px;
                line-height: 29px;
                display: block;
            }
            
            #fencemenu {
                width: 100%;
                height: 40px;
                padding-left: 0;
                background: #fff;
                margin-bottom: 4px;
                margin-top: 4px;
            }
            
            #fencemenu li {
                width: 33.3%;
                line-height: 30px;
                list-style: none;
                float: left;
                text-align: center;
                margin-top: 5px;
            }
        </style>
    </head>

    <body>
        <div class="row">
            <div class="col-md-4">
                <ul id="fencemenu">
                    <li><span id="statsclick">统计区域</span></li>
                    <li><span id="stopclick">滞留区域</span></li>
                    <li><span id="dangerclick">危险区域</span></li>
                </ul>
            </div>
        </div>
        <div class="">
            <div class="col-md-4" style="">

                <!-- 拼接字符串 -->
                <div id="statsarea">统计区域内容统计区域内容统计区域内容统计区域内容统计区域内容统计区域内容统计区域内容</div>
                <!-- 拼接字符串 -->
                <div id="stoparea" style="display:none">滞留区域内容滞留区域内容滞留区域内容滞留区域内容滞留区域内容滞留区域内容</div>
                <div id="dangerarea" style="display:none">危险区域内容危险区域内容危险区域内容危险区域内容危险区域内容</div>
            </div>
        </div>

    </body>
    <script>
        $("#fencemenu li").click(function() {

            var areaName = $(this).find('span').text();
            if(areaName === '统计区域') {
                $(this).find('span').css({
                    "border-bottom": "2px solid #2da5e4",
                    "color": "#2da5e4"
                })
                $(this).siblings().find('span').css({
                    "border-bottom": "none",
                    "color": "#999"
                });

                $('#statsarea').show();
                $('#stoparea').hide();
                $('#dangerarea').hide();
            } else if(areaName === '滞留区域') {
                debugger;
                $(this).find('span').css({
                    "border-bottom": "2px solid #2da5e4",
                    "color": "#2da5e4"
                })
                $(this).siblings().find('span').css({
                    "border-bottom": "none",
                    "color": "#999"
                });

                $('#statsarea').hide();
                $('#stoparea').show();
                $('#dangerarea').hide();
            } else if(areaName === '危险区域') {
                $(this).find('span').css({
                    "border-bottom": "2px solid #2da5e4",
                    "color": "#2da5e4"
                })
                $(this).siblings().find('span').css({
                    "border-bottom": "none",
                    "color": "#999"
                });

                $('#statsarea').hide();
                $('#stoparea').hide();
                $('#dangerarea').show();
            }
        })
    </script>

</html>

原文作者:祈澈姑娘 技术博客:https://www.jianshu.com/u/05f416aefbe1 90后前端妹子,爱编程,爱运营,文艺与代码齐飞,魅力与智慧共存的程序媛一枚。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券