<!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)">學(xué)生管理</a></li>
<li><a href="javascript:void(0)">產(chǎn)品介紹</a></li>
<li><a href="javascript:void(0)">校車安全</a></li>
<li><a href="javascript:void(0)">光谷之星</a></li>
<li><a href="javascript:void(0)">社區(qū)介紹</a></li>
</ul>
<!-- 內(nèi)容區(qū)域 -->
<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都應(yīng)該在此事件發(fā)生后調(diào)用，否則會出現(xiàn)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>
