各位晚安安，歡迎來到coding小白盜版學校官網的第24天，這個計畫的內容是我這個coding超新手會在這30天裡，把複刻學校官網當作目標，從最基礎的前端html、css、js...開始邊做邊學，紀錄每天的學習進度，看看一個月過去能學到什麼程度。

經過前兩天的串不懂API大破防事故之後，我決定來做點簡單的事安慰一下自己的腦袋，所以今天的進度就是～～

補齊分頁&列表

之前DAY18研究的時候，為了不要搞得太複雜以免學不會，所以雖然有六個分頁但只先寫了前三個互相切換，今天就當複習來把剩下ㄉ三個補上吧

因為每個分頁都長一樣，所以只需要把原本的html複製貼上，換class=link…的編號、內容文字和連結，再調整標籤的class=block01(實色)或line03(底線)就好了

<section class="article-middle list04">
            <nav>
                <ul class="font03 nav03" type="none">
                    <li class="line03 info01">一般</li>
                    <li class="line03 info02">招生</li>
                    <li class="line03 info03">緊急</li>
                    <li class="block01 info04">徵才</li>
                    <li class="line03 info05">研討會</li>
                    <li class="line03 info06">活動訊息</li>
                </ul>
            </nav>
            <div class="article-m01">
                <div class="information02 font11">
                    <a href="https://www.ntue.edu.tw/p/406-1000-47841,r495.php?Lang=zh-tw">
                        <div class="information01">
                            <p class="font08">2025-10-08</p><p>/</p>
                            <p class="font14">【徵才】通識教育中心 誠徵活動工讀生(114年10.11.12月)</p>
                        </div>
                    </a>
                   
                    <div class="line01"></div>
                    <a href="https://www.ntue.edu.tw/p/406-1000-47712,r495.php?Lang=zh-tw">
                        <div class="information01">
                            <p class="font08">2025-10-03</p><p>/</p>
                            <p class="font14">本校通識教育中心114學年度第2學期新聘_人工智慧基礎程式設計_兼任教師甄選公告(延長公告，收件至10月13日中午截止)</p>
                        </div>
                    </a>
                    <div class="line01"></div>
                    <a href="https://www.ntue.edu.tw/p/406-1000-47714,r495.php?Lang=zh-tw">
                        <div class="information01">
                            <p class="font08">2025-10-03</p><p>/</p>
                            <p class="font14">本校通識教育中心114學年度第2學期新聘_幸福與人生_兼任教師甄選公告(收件至10月13日中午截止)</p>
                        </div>
                    </a>
                    <div class="line01"></div>
                    <a href="https://www.ntue.edu.tw/p/406-1000-47697,r495.php?Lang=zh-tw">
                        <div class="information01">
                            <p class="font08">2025-10-02</p><p>/</p>
                            <p class="font14">【徵才】人工智慧產學發展中心徵聘「計畫專任人員」第三次公告</p>
                        </div>
                    </a>
                    <div class="line01"></div>
                    <a href="https://www.ntue.edu.tw/p/406-1000-47392,r495.php?Lang=zh-tw">
                        <div class="information01">
                            <p class="font08">2025-09-19</p><p>/</p>
                            <p class="font14">【徵才】本校通識教育中心新聘114學年度第2學期-人工智慧基礎程式設計-兼任教師2名徵選公告_自即日起至114年9月25日下午4點止收件，相關表格詳閱本公告。</p>
                        </div>
                    </a>
                    <div class="line01"></div>
                </div>
            </div>
            <p class="font06">更多緊急訊息</p>
        </section>

css的部分除了list01，其他都先一視同仁的隱藏，等叫到他的時候再出來

.list04{
    display: none;
}

最後js雖然知道有迴圈可以設定，但今天腦子沒上班，所以一樣用土法煉鋼的方式複製貼上

const list01 =document.querySelector(".list01")
const list02 =document.querySelector(".list02")
const list03 =document.querySelector(".list03")
const list04 =document.querySelector(".list04")
const list05 =document.querySelector(".list05")

const info01 =document.querySelectorAll(".info01")
const info02 =document.querySelectorAll(".info02")
const info03 =document.querySelectorAll(".info03")
const info04 =document.querySelectorAll(".info04")
const info05 =document.querySelectorAll(".info05")
const info06 =document.querySelectorAll(".info06")

info04.forEach(btn => {
  btn.addEventListener("click",function(){
    list04.style.display = "flex";
    list05.style.display = "none";
    list03.style.display = "none";
    list02.style.display = "none";
    list01.style.display = "none";
  });
})

完成!

不過這次句子太長所以右邊凸出去了，需要解決一下

.font14{
    white-space: normal;
    overflow-wrap: break-word;
    line-height: 1.5;
}

折行之後這個水平置中也有點醜ㄟ，連絡家長改一下
把原本的align-items:center;改成flex-start

.information01{
    display: flex;
    gap: 13px;
    align-items: flex-start;
    white-space: nowrap;
}

非常完美，這才是真正的完成!!
剩下兩個也是同樣操作，開心下班～