<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
li{
list-style: none;
}
a{
text-decoration: none;
}
.wrap{
width: 100%;
height: 100%;
}
.container{
position: relative;
min-width: 80rem;
}
.nav{
display: flex;
justify-content: flex-end;
height:3.75rem;
}
.nav>li{
margin: 0.46875rem 0.625rem;
padding: 0 0.625rem;
height: 2.8125rem;
line-height:2.8125rem;
border-radius: 0.1875rem;
opacity: 0.05rem;
background-color: salmon;
}
.nav>li a{
font-size: 1rem;
color: #000;
}
#content{
height: 100%;
min-height: 37.5rem;
background-color: royalblue;
}
#content > div{
display: none;
margin: 0 auto;
text-align: center;
}
.nav li.active a{
color: yellow;
}
.nav li.active a:after{
/* background-color: darkred; */
}
.nav li a {
display: block;
color: #000000;
opacity: 0.7;
position: relative;
}
.nav li .hover a:after {
content: "";
width: 100%;
height: 1px;
background: red;
position: absolute;
left: 0;
bottom: 0;
}
</style>
</head>
<body>
<div class="wrap">
<div class="container">
<ul class="nav">
<li class="active"><a href="javascript:void(0)"> 招生资讯</a></li>
<li><a href="javascript:void(0)">学生管理</a></li>
<li><a href="javascript:void(0)">产品介绍</a></li>
<li><a href="javascript:void(0)">校车安全</a></li>
<li><a href="javascript:void(0)">光谷之星</a></li>
<li><a href="javascript:void(0)">社区介绍</a></li>
</ul>
<!-- 内容区域 -->
<div id="content">
<div class="item1" style="display: block;"><img src="img/product_pic1.png" ></div>
<div class="item2"><img src="img/product_pic2.png" ></div>
<div class="item3"><img src="img/product_pic3.png" ></div>
<div class="item4"><img src="img/product_pic4.png" ></div>
<div class="item5"><img src="img/product_pic5.png" ></div>
<div class="item6"><img src="img/product_pic6.png" ></div>
</div>
</div>
</div>
</body>
<script src="js/jquery-1.9.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
document.addEventListener('plusready', function(){
//console.log("所有plus api都应该在此事件发生后调用，否则会出现plus is undefined。"
});
$('.nav>li').on('click',function(){
const index = $(this).index();
console.log(index);
$(this).addClass('active').siblings().removeClass('active');
// $('.item' + (index + 1)).show().siblings().hide();
$("#content>div:eq("+index+")").show().siblings().hide()
})
</script>
</html>
