JQ和JS都寫了。jq比較容易點(diǎn)
<!DOCTYPE html>
<html>
<head>
? ? <meta charset="UTF-8">
? ? <title>實踐題 - 選項卡</title>
? ? <style type="text/css">
? ? ?/* CSS樣式制作 */??
? ? body,ul,li{
? ? ? ? margin:0;
? ? ? ? padding:0;
? ? }
? ? .topnav{
? ? ? ? display:flex;
? ? ? ? list-style-type:none;
? ? ? ? border-bottom:1px solid red;
? ? }
? ?.topnav li{
? ? ? ? flex:1;??
? ? ? ? border:1px solid #ccc;
? ? ? ? margin-left:5px;
? ? ? ? height:30px;
? ? ? ? line-height:30px;
? ? ? ? text-align:center;
? ? ? ? border-bottom:none;
? ? ? ? background-color: #fff;
? ? }
? ? .topnav li:first-child{
? ? ? ? margin-left: 0px;
? ? }
? ? .con{
? ? ? ? border:1px solid #ccc;
? ? ? ? border-top:none;
? ? ? ??
? ? }
? ? .con p{
? ? ? ? margin:0px;
? ? ? ? padding-top:10px;
? ? }
? ? .topnav .active{
? ? ? ? position: relative;
? ? ? ? background-color: #fff;
? ? ? ? margin-bottom:-1px;
? ? ? ? border-top:1px solid red;
? ? ? ? border-bottom:2px solid #fff;
? ? }
? ? </style>
? ??
?
</head>
<body>
<!-- HTML頁面布局 -->
<div>
? ? <ul class="topnav">
? ? ? ? <li class="navli demagin active">房產(chǎn)</li>
? ? ? ? <li class="navli">家居</li>
? ? ? ? <li class="navli">二手房</li>
? ? </ul>
</div>
<div class="con">
? ? <p>275萬購昌平鄰鐵三居 總價20萬買一居</p>
? ? <p>200萬內(nèi)購五環(huán)三居 140萬安家東三環(huán)</p>
? ? <p>北京首現(xiàn)零首付樓盤 53萬購東5環(huán)50平</p>
? ? <p>京樓盤直降5000 中信府 公園樓王現(xiàn)房</p>
</div>
<div class="con" style="display:none">
? ? <p>40平出租屋大改造 美少女的混搭小窩</p>
? ? <p>經(jīng)典清新簡歐愛家 90平老房煥發(fā)新生</p>
? ? <p>新中式的酷色溫情 66平撞色活潑家居</p>
? ? <p>瓷磚就像選好老婆 衛(wèi)生間煙道的設(shè)計</p>
</div>
<div class="con" style="display:none">
? ? <p> 通州豪華3居260萬 二環(huán)稀缺2居250w甩</p>
? ? <p>西3環(huán)通透2居290萬 130萬2居限量搶購</p>
? ? <p>黃城根小學(xué)學(xué)區(qū)僅260萬 121平70萬拋!</p>
? ? <p>獨(dú)家別墅280萬 蘇州橋2居優(yōu)惠價248萬</p>
</div>
<script type="text/javascript" src="./js/jquery.min.js"></script>
<script type="text/javascript">
? ? ? ? ?
? ? // JS實現(xiàn)選項卡切換
? ? var con = document.getElementsByClassName('con');
? ? // console.log(con);
? ? var navli = document.getElementsByTagName('li');
? ? for(var i = 0;i<navli.length;i++){
? ? ? ? navli[i].index = i;
? ? ? ? navli[i].onclick = function(){? ? ? ? ? ??
? ? ? ? ? ? for(var j = 0;j<navli.length;j++){
? ? ? ? ? ? ? ? navli[j].className = '';
? ? ? ? ? ? ? ? con[j].style.display = 'none'
? ? ? ? ? ? }
? ? ? ? ? ? this.className = 'active';
? ? ? ? ? ? con[this.index].style.display = 'block'
? ? ? ? }
? ? }
? ? //JQ寫法
? ? $(".topnav li").click(function(){
? ? ? ? ? ? ? ? $(this).addClass("active").siblings().removeClass("active");
? ? ? ? ? ? ? ? $(".con").eq($(".topnav li").index(this)).show().siblings(".con").hide();
? ? ? ? ? ? });
? ??
? ? </script>
</body>
</html>
2019-05-13
給大佬端茶