<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.tabChange li.active {
background: #e0f0f8;
color: #2fa3e9;
}
.tabChange li {
float: left;
padding: 5px 20px;
border-radius: 15px;
cursor: pointer;
font-size: 12px;
}
li {
list-style: none;
}
</style>
</head>
<body>
<div>
<ul class="tabChange" id="tab1">
<li class="active" data-type="1">污处设施异常</li>
<li data-type="2">大气污染管控异常</li>
<li data-type="3">水污染管控异常</li>
<li data-type="4">土壤污染管控异常</li>
<li data-type="6">用电污染管控异常</li>
</ul>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript">
$("#tab1 li").click(function() {
$(this).siblings().removeClass("active");
$(this).addClass("active");
var type = $(this).attr("data-type");
})
</script>
</body>
</html>
扫一扫
1901
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
