使用 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>

再一次，还有许多其他方式希望对您有所帮助。