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后前端妹子，爱编程，爱运营，文艺与代码齐飞，魅力与智慧共存的程序媛一枚。
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2019.07.30 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读