使用 JavaScript 显示和隐藏内容

Question

I am practicing JavaScript on my personal page and I am having trouble with the #fourth-page (Portfolio). Basically what I want is, when I click on Web Design, it shows the things under class="tab1-content", if I click on Games, it shows pics related to that div (under class="tab3-content) if that makes sense. I attached a JSFiddle (some pics are missing cause idk how to upload pics.

My logic is pretty long so a better one would be appreciated too.

Here's my logic:

notice that I have an ID called "current-tab" which turns the selected tab green. Basically on every click, I remove that ID from every tab element, I also remove every tab content by setting the displays of tab1-content tab2-content tab3-content and tab4-content to none. Then I put the ID where it should be. However I can't figure out how to display the correct tab content I need. Please help?

I'm sure there's a better way to do this

 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

This can be done in a number of ways depending on your need.

The easiest and simplest is by far using Bootstrap Tabs which you can see in the link below: https://www.w3schools.com/bootstrap/bootstrap_tabs_pills.asp

If you are wanting to code this yourself however I can make a recommendation

Use Classes instead of IDs - it is far easier to add and remove classes from elements than it is to change IDs (see example... its crude but it works and should point you down the right path)

 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>

Custom CSS Without Javascript - There is also another little known option of using the radio button this is particularly handy if trying to display tabbed content in a site that does not allow active scripts.

 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>

Once again there are many other ways this hopefully has been helpful for you.