作業(yè)代碼.
<!DOCTYPE html>
<html>
<head>
? ? <meta charset="UTF-8">
? ? <title>Title</title>
? ? <style>
? ? ? ? span{
? ? ? ? ? ? cursor:pointer;
? ? ? ? }
? ? ? ??
? ? ? ? #c{
? ? ? ? ? ? border: 1px solid #ccc;
? ? ? ? ? ? border-top: 2px solid #ad5d34;
? ? ? ? ? ? width: 350px;
? ? ? ? ? ? height: 150px;
? ? ? ? }
? ? ? ??
? ? ? ? li{
? ? ? ? ? ? line-height:28px;
? ? ? ? }
? ? ? ??
? ? ? ? .c{
? ? ? ? ? ? border: 1px solid #ccc;
? ? ? ? ? ? display:inline-block;
? ? ? ? ? ? width: 70px;
? ? ? ? ? ? height: 30px;
? ? ? ? ? ? border-bottom: 2px solid #fff;
? ? ? ? ? ? border-top: 2px solid #ad5d34;
? ? ? ? ? ? margin-left:5px;
? ? ? ? ? ? text-align: center;
? ? ? ? ? ? line-height: 2em;
? ? ? ? ? ? margin-bottom: -2px;
? ? ? ? }
? ? ? ??
? ? ? ? .unc{
? ? ? ? ? ? border: 1px solid #ccc;
? ? ? ? ? ? display:inline-block;
? ? ? ? ? ? width: 70px;
? ? ? ? ? ? height: 30px;
? ? ? ? ? ? border-bottom: 2px solid #ad5d34;
? ? ? ? ? ? margin-left:5px;
? ? ? ? ? ? text-align: center;
? ? ? ? ? ? line-height: 2em;
? ? ? ? ? ? margin-bottom: -2px;
? ? ? ? }
? ? ? ??
? ? </style>
</head>
<body>
? ? <div id="a" >
? ? ? ? <span id="b1" class="c" onclick="f1(1)">房產(chǎn)</span>
? ? ? ? <span id="b2" class="c" onclick="f1(2)">家居</span>
? ? ? ? <span id="b3" class="c" onclick="f1(3)">二手房</span>
? ? </div>
? ? <div id="c">
? ? ? ? <ol id="d1">
? ? ? ? ? ? ?<li>275萬購昌平鄰鐵三居 總價20萬買一居</li>
? ? ? ? ? ? ?<li>200萬內(nèi)購五環(huán)三居 140萬安家東三環(huán)</li>
? ? ? ? ? ? ?<li>北京首現(xiàn)零首付樓盤 53萬購東5環(huán)50平</li>
? ? ? ? ? ? ?<li>京樓盤直降5000 中信府 公園樓王現(xiàn)房</li>
? ? ? ? </ol>
? ? ? ? <ol id="d2">
? ? ? ? ? ? ?<li>40平出租屋大改造 美少女的混搭小窩</li>
? ? ? ? ? ? ?<li>經(jīng)典清新簡歐愛家 90平老房煥發(fā)新生</li>
? ? ? ? ? ? ?<li>新中式的酷色溫情 66平撞色活潑家居</li>
? ? ? ? ? ? ?<li>瓷磚就像選好老婆 衛(wèi)生間煙道的設(shè)計</li>
? ? ? ? </ol>
? ? ? ? <ol id="d3">
? ? ? ? ? ? <li>通州豪華3居260萬 二環(huán)稀缺2居250w甩</li>
? ? ? ? ? ? <li>西3環(huán)通透2居290萬 130萬2居限量搶購</li>
? ? ? ? ? ? <li>黃城根小學(xué)學(xué)區(qū)僅260萬 121平70萬拋!</li>
? ? ? ? ? ? <li>獨家別墅280萬 蘇州橋2居優(yōu)惠價241萬</li>
? ? ? ? </ol>
? ? </div>
? ? <script>
? ? ? ? f1(1);
? ? ? ? function f1(aaa){
? ? ? ? ? ? var b1=document.getElementById("b1");
? ? ? ? ? ? var b2=document.getElementById("b2");
? ? ? ? ? ? var b3=document.getElementById("b3");
? ? ? ? ? ? var d1=document.getElementById("d1");
? ? ? ? ? ? var d2=document.getElementById("d2");
? ? ? ? ? ? var d3=document.getElementById("d3");
? ? ? ? ? ??
? ? ? ? ? ? switch(aaa){
? ? ? ? ? ? ? ? case 1:
? ? ? ? ? ? ? ? ? ? b1.className = "c";
? ? ? ? ? ? ? ? ? ? b2.className = "unc";
? ? ? ? ? ? ? ? ? ? b3.className = "unc";
? ? ? ? ? ? ? ? ? ? d1.style.display="block";
? ? ? ? ? ? ? ? ? ? d2.style.display="none";
? ? ? ? ? ? ? ? ? ? d3.style.display="none";
? ? ? ? ? ? ? ? ? ? break;
? ? ? ? ? ? ? ? case 2:
? ? ? ? ? ? ? ? ? ? b1.className = "unc";
? ? ? ? ? ? ? ? ? ? b2.className = "c";
? ? ? ? ? ? ? ? ? ? b3.className = "unc";
? ? ? ? ? ? ? ? ? ? d1.style.display="none";
? ? ? ? ? ? ? ? ? ? d2.style.display="block";
? ? ? ? ? ? ? ? ? ? d3.style.display="none";
? ? ? ? ? ? ? ? ? ? break;
? ? ? ? ? ? ? ? case 3:
? ? ? ? ? ? ? ? ? ? b1.className = "unc";
? ? ? ? ? ? ? ? ? ? b2.className = "unc";
? ? ? ? ? ? ? ? ? ? b3.className = "c";
? ? ? ? ? ? ? ? ? ? d1.style.display="none";
? ? ? ? ? ? ? ? ? ? d2.style.display="none";
? ? ? ? ? ? ? ? ? ? d3.style.display="block";
? ? ? ? ? ? ? ? ? ? break;
? ? ? ? ? ? }
? ? ? ? }
? ? </script>
</body>
</html>
2021-01-20
<!DOCTYPE html>
<html>
<head>
? ? <meta charset="UTF-8">
? ? <title>實踐題 - 選項卡</title>
? ? <style type="text/css">
? ? ?/* CSS樣式制作 */??
? ? * {
? ? margin: 0px;
padding: 0px;
font-family: 'Microsoft YaHei','SimSun';
line-height: 30px;
? ? }
? ??
? ? a {
? ? ?color: #000;
? ? ?text-decoration: none;
? ? }
? ??
? ? a:hover {
? ? ?color: blue;
? ? }
? ??
? ? #tabList {
? ? ?width: 350px;
? ? ?height: 180px;
? ? ?margin: 10px auto;
? ? }
? ??
? ? #tabList div {
? ? ?border: 1px solid #000;
? ? ?border-top: none;
? ? ?padding: 5px 7px;
? ? }
? ??
? ? .ul_horizontal {
? ? ?border-bottom: 2px solid #990000;
? ? ?height: 32px;
? ? }
? ??
? ? .ul_horizontal li {
? ? ?display: inline-block;
? ? ?width: 70px;
? ? ?text-align: center;
? ? ?border: 1px solid #999;
? ? ?border-bottom: none;
? ? ?margin-left: 5px;
? ? }
? ??
? ? .ul_horizontal li.active {
? ? ?border-top: 2px solid #990000;
? ? ?border-bottom: 2px solid #fff;
? ? }
? ??
? ? .ul_horizontal li:hover {
? ? ?cursor: pointer;
? ? }
? ??
? ? .hide {
? ? ?display: none;
? ? }
? ??
? ? .show {
? ? ?display: block;
? ? }
? ? ? ? </style>
? ??
? ? <script type="text/javascript">
? ? ? ? ?
? ? // JS實現(xiàn)選項卡切換
? ? window.onload = function() {
? ? ? ? var tabs = document.getElementById("tabList");
? ? ? ? var li = tabs.getElementsByTagName("li");
? ? ? ? var div = tabs.getElementsByTagName("div");
? ? ? ? for (var i = 0; i < li.length; i++) {
? ? ? ? ? ? li[i].index = i;
? ? ? ? ? ? li[i].onclick = function() {
? ? ? ? ? ? ? ? for (var j = 0; j < li.length; j++) {
? ? ? ? ? ? ? ? ? ? li[j].className = "";
? ? ? ? ? ? ? ? ? ? div[j].className = "hide";
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? this.className = "active";
? ? ? ? ? ? ? ? div[this.index].className = "show";
? ? ? ? ? ? }
? ? ? ? }
? ? }
? ? </script>
?
</head>
<body>
<!-- HTML頁面布局 -->
<div id="tabList">
? ? <ul class="ul_horizontal">
? ? ? ? <li class="active">房產(chǎn)</li><li>家居</li><li>二手房</li>
? ? </ul>
? ? <div>
? ? ? ? <a href="javascript:void(0)">275萬購昌平鄰鐵三居 總價20萬買一居</a><br />
? ? ? ? <a href="javascript:void(0)">200萬內(nèi)購五環(huán)三居 140萬安家東三環(huán)</a><br />
? ? ? ? <a href="javascript:void(0)">北京首現(xiàn)零首付樓盤 53萬購東5環(huán)50平</a><br />
? ? ? ? <a href="javascript:void(0)">京樓盤直降5000 中信府 公園樓王現(xiàn)房</a><br />
? ? </div>
? ? <div class="hide">
? ? ? ? <a href="javascript:void(0)">40平出租屋大改造 美少女的混搭小窩</a><br />
? ? ? ? <a href="javascript:void(0)">經(jīng)典清新簡歐愛家 90平老房煥發(fā)新生</a><br />
? ? ? ? <a href="javascript:void(0)">新中式的酷色溫情 66平撞色活潑家居</a><br />
? ? ? ? <a href="javascript:void(0)">瓷磚就像選好老婆 衛(wèi)生間煙道的設(shè)計</a><br />
? ? </div>
? ? <div class="hide">
? ? ? ? <a href="javascript:void(0)">通州豪華3居260萬 二環(huán)稀缺2居250w甩</a><br />
? ? ? ? <a href="javascript:void(0)">西3環(huán)通透2居290萬 130萬2居限量搶購</a><br />
? ? ? ? <a href="javascript:void(0)">黃城根小學(xué)學(xué)區(qū)僅260萬 121平70萬拋!</a><br />
? ? ? ? <a href="javascript:void(0)">獨家別墅280萬 蘇州橋2居優(yōu)惠價248萬</a><br />
? ? </div>
? ??
</div>
?
</body>
</html>