這是我的CSS。我的目標是在您單擊某個選項卡時添加規則，以便它顯示必要的內容，但它不起作用。.show#tab-1-content, #tab-2-content, #tab-3-content {  display: none;}.show {  display: block !important;}這是我的整個Javascript頁面。我把 在控制臺中查看類是否被正確添加，似乎每當我單擊它時它都是這樣，但它沒有像它應該的那樣顯示內容。console.logshowconst tabItems = document.querySelectorAll('.tab-item');const tabContentItems = document.querySelectorAll('.tab-content-item');// select tab content itemfunction selectItem(e) {  removeBorder();  removeShow();  //Add border to current tab  this.classList.add('tab-border');  //Grab content item from DOM  const tabContentItem = document.querySelector(`#${ this.id }-content`);  //Add show class  tabContentItem.classList.add('show');  console.log(tabContentItem)}function removeBorder() { tabItems.forEach(item => item.classList.remove('tab-border'));}function removeShow() { tabContentItems.forEach(item => item.classList.remove('show'));}// Listen for tab clicktabItems.forEach(item => item.addEventListener('click', selectItem));我的 Border 變量按預期工作，刪除邊框并將其添加到我單擊的元素中。我試圖只是制作一個Netflix登陸頁面克隆作為一個項目，這是該網站的鏈接 https://netflx.github.io/ 。我刪除了頁腳并替換了圖像，因為我的防病毒軟件不允許我訪問該網站。我試圖完全按照netflix的作用，當您單擊不同的選項卡元素時彈出不同的部分，但它沒有這樣做。它僅適用于第一個選項卡，但不顯示其他兩個選項卡的內容。有誰知道發生了什么以及我如何解決它？