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

今天提早下課，現在時間是下午五點半，我已經洗完澡坐在房間裡打IT，天空還是微亮的
好久沒有這麼悠閒了，心情真好

今天ㄉ進度是來做網頁中間這塊可以切換的分頁～

憑藉著我優秀的邏輯推理能力，我想像的做法應該是先把每種分頁做都出來(一般、招生、緊急...)，然後全部隱藏起來只留一個，叫到再輪流出現。理論有了，開始實踐：

之前分頁標籤只做了橘色底線的款式
現在要加一下如果分頁正好被選取到、會變成背景填滿橘色色塊

<ul class="font03 nav03" type="none">
    <li class="block01 info01">一般</li>
    <li class="line03 info02">招生</li>
    <li class="line03 info03">緊急</li>
    <li class="line03 info04">徵才</li>
    <li class="line03 info05">研討會</li>
    <li class="line03 info06">活動訊息</li>
</ul>

.line03{/*橘色短橫線*/
    border-bottom: 2px solid #DDA657;
    width: fit-content;
    padding: 1rem 2rem;
    cursor: pointer;
}

.block01{
    background-color: #DDA657;
    width: fit-content;
    padding: 1rem 2rem;
}

原本只做了一個「一般」消息的清單，現在要整套複製很多份來改內容
因為太懶了，今天先做三個就好，如果成功之後再找時間把其他的加上

改內容&複製的過程順便也幫每個section加上.list、li加上.info的class標籤，給等等要寫的js安插眼線(都長得差不多，這是其中一個分頁的html)

<section class="article-middle list01">
            <nav>
                <ul class="font03 nav03" type="none">
                    <li class="block01 info01">一般</li>
                    <li class="line03 info02">招生</li>
                    <li class="line03 info03">緊急</li>
                    <li class="line03 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-34467,r492.php?Lang=zh-tw">
                        <div class="information01">
                            <p class="font08">2024-05-02</p><p>/</p>
                            <p>本校 「校務發展績效報告」 敬請參閱</p>
                        </div>
                    </a>
                   
                    <div class="line01"></div>
                    <a href="https://www.ntue.edu.tw/p/406-1000-46820,r492.php?Lang=zh-tw">
                        <div class="information01">
                            <p class="font08">2024-08-13</p><p>/</p>
                            <p>【公告】本校114學年度大學分發入學不另寄發錄取通知，錄取生請至本校網頁「新生專區」查閱註冊須知</p>
                        </div>
                    </a>
                    <div class="line01"></div>
                    <a href="https://www.ntue.edu.tw/p/406-1000-46363,r492.php?Lang=zh-tw">
                        <div class="information01">
                            <p class="font08">2024-08-21</p><p>/</p>
                            <p>「有關社群平台疑似有學生霸凌情事」澄清公告</p>
                        </div>
                    </a>
                    <div class="line01"></div>
                    <a href="https://www.ntue.edu.tw/p/406-1000-47223,r492.php?Lang=zh-tw">
                        <div class="information01">
                            <p class="font08">2024-09-16</p><p>/</p>
                            <p>【轉知】大陸委員會邀請貴校師生參訪</p>
                        </div>
                    </a>
                    <div class="line01"></div>
                    <a href="https://www.ntue.edu.tw/p/406-1000-47235,r492.php?Lang=zh-tw">
                        <div class="information01">
                            <p class="font08">2024-09-16</p><p>/</p>
                            <p>【通知】本校114年9月24日於行政大樓及圖書館舉行國家防災日地震演練活動，請配合相關事項</p>
                        </div>
                    </a>
                   
                    <div class="line01"></div>
                </div>
            </div>
            <p class="font06">更多一般訊息</p>
        </section>

接著就進到重頭戲js啦

首先要在js裡給這些剛出生的class們換發身分證，每個都設定成常數，
常數和class的名字直接取一樣最方便了，省掉精神錯亂的風險

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

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")

原本有想說這樣一大串複製貼上改數字好像不太聰明，於是問了chatgpt學長

設定常數的時候
const list01 =document.querySelector(".list01")
const list02 =document.querySelector(".list02")
const list03 =document.querySelector(".list03")...
一行一行打好累，有甚麼快速設定的好方法嗎?

他說

啊～我懂你的意思 😆
你現在是一行一行去抓 .list01、.list02、.list03，會覺得很累對吧？
其實可以用同一個 clas或是迴圈來快速處理。

方法1：給共同 class

HTML：
< div class="list">這是 list01
< div class="list">這是 list02
< div class="list">這是 list03

JS：
const lists = document.querySelectorAll(".list");
lists.forEach((item, index) => {
console.log("這是第 " + (index+1) + " 個：", item);
});
這樣你不用管 01、02、03，只要有 .list 就會抓到。

方法2：用迴圈拼 class 名稱

如果你就是想保留 .list01、.list02、.list03這種命名，也能用迴圈自動生成
JS：
let lists = [];
for (let i = 1; i <= 3; i++) {
lists.push(document.querySelector(".list0" + i));
}
console.log(lists); // [list01元素, list02元素, list03元素]

…你懂我...但我不懂你啊...反正先用笨方法寫好了

接著用自己的想法來試寫看看

info01.addEventListener("click",function(){ if(list01.style.display === "none"){ list01.style.display === "flex"; } }) 
info02.addEventListener("click",function(){ if(list02.style.display === "none"){ list02.style.display === "flex"; } })
info03.addEventListener("click",function(){ if(list03.style.display === "none"){ list03.style.display === "flex"; } })

結果居然沒反應:((((
但是不要緊，我們還有chatgpt學長呀

總之經過深入的討論最後成果是這樣

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

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

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

這次終於可以動了！可喜可賀
現在時間晚上六點半，我要來享受難得ㄉ美好的夜晚了，各位明天見ㄅㄅ～