使用 JavaScript 顯示和隱藏內容

Question

我正在我的個人頁面上練習 JavaScript，但在使用 #fourth-page（投資組合）時遇到了問題。 基本上我想要的是，當我點擊網頁設計時，它會顯示 class="tab1-content" 下的內容，如果我點擊游戲，它會顯示與該 div 相關的圖片（在 class="tab3-content 下）如果是有道理。我附上了一個JSFiddle （有些圖片丟失了，因為我不知道如何上傳圖片。

我的邏輯很長，所以更好的邏輯也會受到贊賞。

這是我的邏輯：

請注意，我有一個名為“current-tab”的 ID，它將選定的選項卡變為綠色。 基本上在每次點擊時，我都會從每個選項卡元素中刪除該 ID，我還通過將 tab1-content tab2-content tab3-content 和 tab4-content 的顯示設置為 none 來刪除每個選項卡內容。 然后我把 ID 放在它應該放在的地方。 但是我不知道如何顯示我需要的正確標簽內容。 請幫忙？

我確定有更好的方法來做到這一點

 var tab1 = document.querySelector("#homepage #fourth-page .portfolio-container .tab1"); var tab2 = document.querySelector("#homepage #fourth-page .portfolio-container .tab2"); var tab3 = document.querySelector("#homepage #fourth-page .portfolio-container .tab3"); var tab4 = document.querySelector("#homepage #fourth-page .portfolio-container .tab4"); var tabs = document.querySelector("#homepage #fourth-page .portfolio-container .tabs"); var tabLinks = tabs.getElementsByTagName("a"); // Array var temp = document.querySelector("#homepage #fourth-page .portfolio .tab-content-wrap"); var tabContents = temp.getElementsByClassName("tab-content"); // Initially, Web Design is green console.log("testing"); tab1.setAttribute("id", "current-tab"); // If I click one, hide the other ones // Adding individual listening events tab1.addEventListener("click", showContent); tab2.addEventListener("click", showContent); tab3.addEventListener("click", showContent); tab4.addEventListener("click", showContent); function showContent() { console.log("executing function"); // give it #current tab, remove previous // display its content, remove other one for (let i = tabLinks.length - 1; i >= 0; i--) { tabLinks[i].removeAttribute("id"); tabContents[i].style.cssText = "display: none"; } this.setAttribute("id", "current-tab"); }

Answer 1

這可以通過多種方式完成，具體取決於您的需要。

到目前為止，最簡單和最簡單的是使用 Bootstrap Tabs，您可以在下面的鏈接中看到它： https : //www.w3schools.com/bootstrap/bootstrap_tabs_pills.asp

如果您想自己編寫代碼，我可以提出建議

使用類而不是 ID - 從元素中添加和刪除類比更改 ID 要容易得多（參見示例......它很粗糙，但它有效，應該為你指明正確的道路）

 function viewMagicBox(boxRef) { var items = document.getElementsByClassName("magic-box active"); var itemCount = items.length; for (var i = 0; i < itemCount; i++) { items[i].classList.remove("active"); } document.getElementById(boxRef + "-content").classList.add("active"); }

 .active { display: block !important; } .magic-box { display: none; }

 <a onclick="viewMagicBox('box1')">Box1</a>&nbsp;<a onclick="viewMagicBox('box2')">Box2</a>&nbsp;<a onclick="viewMagicBox('box3')">Box3</a>&nbsp;<a onclick="viewMagicBox('box4')">Box4</a> <div id="box1-content" class="magic-box">This is what is displayed in <span style="color:red;">Box 1</span></div> <div id="box2-content" class="magic-box">This is what is displayed in <span style="color:blue;">Box 2</span></div> <div id="box3-content" class="magic-box">This is what is displayed in <span style="color:green;">Box 3</span></div> <div id="box4-content" class="magic-box">This is what is displayed in <span style="color:gold;">Box 4</span></div>

沒有 Javascript 的自定義 CSS - 還有另一個鮮為人知的使用radio button選項，如果嘗試在不允許活動腳本的站點中顯示選項卡式內容，這尤其方便。

 ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; } li { padding: 10px; float: left; } input { position: absolute; opacity: 0; z-index: -1; } label { cursor: pointer; } .tabheader { padding: 5px; background-color: #394620; margin-top: 5px; margin-bottom: 0; color: white; } .tab-content { display: none; background-color: white; } .tabheader:hover { background-color: grey; border: #394620 4px solid; color: #394620; margin-bottom: -4; } input:checked~.tab-content { display: block; }

 <div role="tabpanel"> <!-- Nav tabs --> <ul role="tablist"> <li role="presentation"><label class="tabheader" for="magicTab1">Magic Tab 1</label></li> <li role="presentation"><label class="tabheader" for="magicTab2">Magic Tab 2</label></li> <li role="presentation"><label class="tabheader" for="magicTab3">Magic Tab 3</label></li> <li role="presentation"><label class="tabheader" for="magicTab4">Magic Tab 4</label></li> </ul> <!-- TAB START --> <div> <input type="radio" id="magicTab1" checked name="my_tabs"> <div class="tab-content"> <div class="tab-pane active" role="tabpanel"> <h2>Tab 1 is the First</h2> <p>This is the first tab content</p> </div> </div> </div> <div> <input type="radio" id="magicTab2" name="my_tabs"> <div class="tab-content"> <div class="tab-pane active" role="tabpanel"> <h2>Tab 2 is the Second</h2> <p>This is the second tab content</p> </div> </div> </div> <div> <input type="radio" id="magicTab3" name="my_tabs"> <div class="tab-content"> <div class="tab-pane active" role="tabpanel"> <h2>Tab 3 is the Third</h2> <p>This is the third tab content</p> </div> </div> </div> <div> <input type="radio" id="magicTab4" name="my_tabs"> <div class="tab-content"> <div class="tab-pane active" role="tabpanel"> <h2>Tab 4 is the Fourth</h2> <p>This is the fourth tab content</p> </div> </div> </div> <!-- TABS END ---> </div>

再一次，還有許多其他方式希望對您有所幫助。