終于實現了,下一步該學什么?
<!DOCTYPE html>
<html>
<head>
? ? <meta charset="UTF-8">
? ? <title>實踐題 - 選項卡</title>
? ? <style type="text/css">
? ? ? ? /* CSS樣式制作 */
? ? ? ? table {
? ? ? ? ? ? background-color: #ff0000;
? ? ? ? }
? ? ? ? ul {
? ? ? ? ? ? height: auto;
? ? ? ? ? ? width: auto;
cursor:pointer;
? ? ? ? }
? ? ? ? li {
? ? ? ? ? ? list-style: none;
? ? ? ? ? ? float: left;
? ? ? ? ? ? height: 35px;
? ? ? ? ? ? line-height: 35px;
? ? ? ? ? ? width: 70px;
? ? ? ? ? ? text-align: center;
? ? ? ? ? ? margin: 5px;
? ? ? ? ? ? border: 1px solid #9a4f4f;
? ? ? ? ? ? position: relative;
? ? ? ? ? ? left: 0px;
? ? ? ? }
? ? ? ? .table1 {
? ? ? ? ? ? border-top: 2px solid #9a4f4f;
? ? ? ? ? ? background-color: #fffff2;
? ? ? ? ? ? border-bottom: 0px;
? ? ? ? ? ? z-index: 99;
? ? ? ? ? ? border-left: 1px solid #9a4f4f;
? ? ? ? ? ? border-right: 1px solid #9a4f4f;
? ? ? ? }
? ? ? ? .list {
? ? ? ? ? ? font-size: 14px;
? ? ? ? ? ? position: absolute;
? ? ? ? ? ? top: 56px;
? ? ? ? ? ? left: 45px;
? ? ? ? ? ? display: block;
? ? ? ? ? ? width: 250px;
? ? ? ? ? ? border: 1px solid #9a4f4f;
border-top: 2px solid #9a4f4f;
? ? ? ? ? ? padding: 5px;
? ? ? ? ? ? background-color: #fffff2;
? ? ? ? }
? ? ? ? div {
? ? ? ? ? ? display: none;
? ? ? ? }
? ? </style>
? ? <script type="text/javascript">
? ? ? ? // JS實現選項卡切換
? ? ? ? window.onload = function() {
? ? ? ? ? ? qiehuan();
? ? ? ? }
? ? ? ? var table1 = document.getElementsByTagName("li");
? ? ? ? var list1 = document.getElementsByTagName("div");
? ? ? ? var i, n;
? ? ? ? function qiehuan() {
? ? ? ? ? ? for (i = 0; i < table1.length; i++) {
? ? ? ? ? ? ? ? table1[i].onclick = function() {
? ? ? ? ? ? ? ? ? ? for (n = 0; n < table1.length; n++) {
? ? ? ? ? ? ? ? ? ? ? ? table1[n].className = "";
? ? ? ? ? ? ? ? ? ? ? ? list1[n].className = "";
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? this.className = "table1";
? ? ? ? ? ? ? ? ? ? gensui();
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? }
? ? ? ? function gensui() {
? ? ? ? ? ? for (i = 0; i < 3; i++) {
? ? ? ? ? ? ? ? if (table1[i].className == "table1") {
? ? ? ? ? ? ? ? ? ? list1[i].className = "list";
? ? ? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? ? ? list1[i].className = "";
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? }
? ? </script>
</head>
<body>
? ? <!-- HTML頁面布局 -->
? ? <table>
? ? ? ? <ul>
? ? ? ? ? ? <li class="table1">房產</li>
? ? ? ? ? ? <li>家居</li>
? ? ? ? ? ? <li>二手房</li>
? ? ? ? </ul>
? ? </table>
? ? <div class="list">
? ? ? ? 275萬購昌平鄰鐵三居 總價20萬買一居</br>
? ? ? ? 200萬內購五環三居 140萬安家東三環</br>
? ? ? ? 北京首現零首付樓盤 53萬購東5環50平</br>
? ? ? ? 京樓盤直降5000 中信府 公園樓王現房
? ? </div>
? ? <div class="">
? ? ? ? 40平出租屋大改造 美少女的混搭小窩</br>
? ? ? ? 經典清新簡歐愛家 90平老房煥發新生</br>
? ? ? ? 新中式的酷色溫情 66平撞色活潑家居</br>
? ? ? ? 瓷磚就像選好老婆 衛生間煙道的設計
? ? </div>
? ? <div class="">
? ? ? ? 通州豪華3居260萬 二環稀缺2居250w甩</br>
? ? ? ? 西3環通透2居290萬 130萬2居限量搶購</br>
? ? ? ? 黃城根小學學區僅260萬 121平70萬拋!</br>
? ? ? ? 獨家別墅280萬 蘇州橋2居優惠價248萬
? ? </div>
</body>
</html>
2020-03-24
不錯不錯，下一步就是好好看看官方的文檔，這個很重要的，看文檔來的知識更全面