每天写个小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>
