专栏首页编程微刊jQuery 遍历 - siblings() 方法应用

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 条评论
登录 后参与评论

相关文章

  • 前端css实现最基本的时间轴

    王小婷
  • jQuery实现点击图标div循环放大缩小功能

    很基础的一个功能,点击左下角的图标按钮,地图的整个div会变大,变大预览之后,再次点击图标按钮,地图的整个div会变小,恢复原样,两个图标在地图界面的放大和缩小...

    王小婷
  • 仿百度地图上拉下滑抽屉盒

    王小婷
  • Css实现聊天框

    任我行RQ
  • SAUI-关于input滚动问题

    2 去掉父级的overscroll,scroll-view。貌似所有的问题都不见了。经ios+andriod各一台手机测试

    ss-lgh
  • vue中样式的典型操作(:class,:style)

    用户1149564
  • 【免费】渗透测试室内一对一培训-工具篇更新

    https://pan.baidu.com/s/1i5tEFQk910b_UNXk_N-ADw 密码:fu5s

    Jumbo
  • 2018年有关云的预言

    云领域也发生了相同的事情,真正的颠覆性创新(我称之为云2.0)终于成为主流。云2.0关乎平台服务、无服务器和只有在需要时才运行异构云服务的可组合的应用程序(co...

    静一
  • 天机阁——全链路跟踪系统设计与实现

    小时光茶社 传说中天机阁里有一台掌控世间一切的机器,万物运行由此产生。本文的“天机阁”是一个基于链路跟踪的监控系统,后台开发人员能够通过“天机阁”洞察“天机”...

    小时光
  • 【Vue原理】Render - 源码版 之 主要 Render

    compile 我们已经讲了九篇的内容了,终于走到了 render,今天就来给自己记录下渲染三部曲的第二部,render,咦,render 内容不多的,就两篇文...

    神仙朱

扫码关注云+社区

领取腾讯云代金券