<!DOCTYPE html>
|
<html lang="en">
|
<head>
|
<meta charset="UTF-8">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<title>图列</title>
|
<script src="../../lib/jquery/jquery-1.11.3.min.js"></script>
|
<style>
|
|
ul {
|
list-style: none;
|
}
|
ul{
|
display: flex;
|
flex-direction: row;
|
padding: 0;
|
margin: 0;
|
|
}
|
ul li {
|
width: 70px;
|
height: 20px;
|
color: aliceblue;
|
background: rgba(32,160,255,0.3);
|
text-align: center;
|
line-height: 20px;
|
font-family: Arial, Helvetica, sans-serif;
|
box-sizing: border-box;
|
/* box-shadow: 3px 3px 3px #eee;; */
|
border-right: 1px solid #f5f5f5;
|
cursor:pointer
|
}
|
#day04{
|
width: 100px;
|
}
|
|
.showTime{
|
width: 890px;
|
height: 200px;
|
/* border: 1px solid #ffff66; */
|
}
|
.showTime p{
|
width: 100%;
|
height:100%;
|
margin: 0;
|
}
|
.navbar{
|
display: flex;
|
flex-direction: column;
|
/* align-items: center; */
|
/* justify-content: center; */
|
}
|
.touchOn{
|
background:#ff9966;
|
/* font-size: 20px; */
|
font-weight: bold;
|
}
|
</style>
|
</head>
|
<body>
|
|
<div class="navbar">
|
<ul>
|
<li id="day01">国控点</li>
|
<li id="day02">微站</li>
|
<li id="day03">监测点</li>
|
<li id="day04">道路与区域</li>
|
|
</ul>
|
<div class="showTime">
|
<p id="content01">
|
<img src="../../img/tuglie/gk_pm25.png" alt="">
|
<img src="../../img/tuglie/gk_pm10.png" alt="">
|
<img src="../../img/tuglie/gk_no2.png" alt="">
|
<img src="../../img/tuglie/gk_co.png" alt="">
|
</p>
|
<p id="content02">
|
<img src="../../img/tuglie/wz_pm25.png" alt="">
|
<img src="../../img/tuglie/wz_pm10.png" alt="">
|
<img src="../../img/tuglie/wz_no2.png" alt="">
|
<img src="../../img/tuglie/wz_co.png" alt="">
|
</p>
|
<p id="content03">
|
<img src="../../img/tuglie/jc_tsp.png" alt="">
|
</p>
|
<p id="content04">
|
<img src="../../img/tuglie/other_pm2.5.png" alt="">
|
<img src="../../img/tuglie/other_pm10.png" alt="">
|
<img src="../../img/tuglie/other_no2.png" alt="">
|
<img src="../../img/tuglie/other_no.png" alt="">
|
<img src="../../img/tuglie/other_co.png" alt="">
|
<img src="../../img/tuglie/other_nox.png" alt="">
|
</p>
|
</div>
|
</div>
|
|
|
</body>
|
<script>
|
var thisWidget;
|
function initWidgetView(_thisWidget) {
|
thisWidget = _thisWidget
|
}
|
|
$(function(){
|
$(".showTime").find("p").hide();//先隐藏所有p元素
|
})
|
$("ul li").click(function () {
|
if (!$(this).hasClass("touchOn")) {//$(this)表示所点击的元素，在这里极为好用
|
$(this).addClass("touchOn");//给所点击元素加上touchOn类
|
}
|
$(this).siblings().removeClass("touchOn");//移除其他元素的touchOn类
|
var id = $(this).attr('id');//获取所点击元素的id
|
id = id.slice(4, 5);//获取所点击元素的id的序号，方便与下文p的id对应
|
var showId = $(".showTime").find("p").eq((id - 1)).attr('id');//因为index从0开始，这里须id-1
|
showId='#'+showId;
|
$(showId).show();
|
$(showId).siblings().hide();//注意！！！这里不能写$("showId")
|
})
|
</script>
|
</html>
|
