Match A Click Event On A Target Element To A Separate Element

Question

I want to be able to link a tab link with a tab pane via a click event.

I have the code that places/removes an active class on each tab link, but I'm struggling to match this to the relevant tab pane.

Would I do this via an e.target event and do it by matching array position? Or to use the href attribute of the tab link and match it to the #id of the tab pane?

 var tabLink = document.querySelectorAll(".tab-link"), tabPane = document.querySelectorAll(".tab-pane") tabLink.forEach(function (item) { item.addEventListener('click', function (e) { // ADDS AND REMOVES ACTIVE CLASS ON TABLINKS tabLink.forEach(function (item) { item.classList.remove("active") }) item.classList.add("active") // SOMEHOW EQUATE TAB LINKS TO TAB PANES console.log(e.target) },false) })

 .nav-tabs { display: flex; align-items: center; padding: 1rem 2rem; list-style: none; background: lightblue; }.tab-link { margin-left: 4rem; padding: 1rem; border-radius: 1px; transition: 0.2s; display: block; } /*changes background of active tab link*/.tab-link.active { background: white; } /*hides tab panes*/.tab-pane { display: none; } /*shows active pane*/.tab-pane.active { display: block; }

 <div class="tabs-wrapper"> <ul class="nav-tabs" role="tablist"> <li role="presentation"><a class="tab-link active" href="#html-tab" title="html tab" role="tab">FIRST</a></li> <li role="presentation"><a class="tab-link" href="#css-tab" title="css tab" role="tab">SECOND</a></li> <li role="presentation"><a class="tab-link" href="#result-tab" title="result tab" role="tab">THIRD</a></li> </ul> <!-- tab panel containing tab panes --> <div class="tab-panel"> <div class="tab-pane active" id="html-tab" role="tabpanel"> FIRST CONTENT </div> <div class="tab-pane" id="css-tab" role="tabpanel"> SECOND CONTENT </div> <div class="tab-pane" id="result-tab" role="tabpanel"> THIRD CONTENT </div> </div> </div>

Answer 1

I used this link from w3schools to come up with an answer. The key is to assign some type of attibute to the tab itself to let it know what the target content is. Then you can manage the display of the tab panes to reflect that.

 var tabLink = document.querySelectorAll(".tab-link"), tabPane = document.querySelectorAll(".tab-pane") tabLink.forEach(function (item) { item.addEventListener('click', function (e) { // ADDS AND REMOVES ACTIVE CLASS ON TABLINKS tabLink.forEach(function (item) { item.classList.remove("active") }) item.classList.add("active") // REMOVES DISPLAY OF CONTENT AREAS tabPane.forEach(function (tab){ tab.style.display = "none"; }) // SOMEHOW EQUATE TAB LINKS TO TAB PANES var targetPanel = item.getAttribute("content-panel"); document.getElementById(targetPanel).style.display = "block"; },false) })

 .nav-tabs { display: flex; align-items: center; padding: 1rem 2rem; list-style: none; background: lightblue; }.tab-link { margin-left: 4rem; padding: 1rem; border-radius: 1px; transition: 0.2s; display: block; } /*changes background of active tab link*/.tab-link.active { background: white; } /*hides tab panes*/.tab-pane { display: none; } /*shows active pane*/.tab-pane.active { display: block; }

 <div class="tabs-wrapper"> <ul class="nav-tabs" role="tablist"> <li role="presentation"><a class="tab-link active" href="#html-tab" title="html tab" role="tab" content-panel="html-tab">FIRST</a></li> <li role="presentation"><a class="tab-link" href="#css-tab" title="css tab" role="tab" content-panel="css-tab">SECOND</a></li> <li role="presentation"><a class="tab-link" href="#result-tab" title="result tab" role="tab" content-panel="result-tab">THIRD</a></li> </ul> <!-- tab panel containing tab panes --> <div class="tab-panel"> <div class="tab-pane active" id="html-tab" role="tabpanel"> FIRST CONTENT </div> <div class="tab-pane" id="css-tab" role="tabpanel"> SECOND CONTENT </div> <div class="tab-pane" id="result-tab" role="tabpanel"> THIRD CONTENT </div> </div> </div>

Answer 2

You need use getAttribute() function

I made a jsfiddle for you: https://jsfiddle.net/fgu1ycjo/3/

<div class="tabs-wrapper">
  <ul class="nav-tabs" role="tablist">
    <li role="presentation"><a class="tab-link active" target="html-tab" title="html tab" role="tab">FIRST</a></li>
    <li role="presentation"><a class="tab-link" target="css-tab" title="css tab" role="tab">SECOND</a></li>
    <li role="presentation"><a class="tab-link" target="result-tab" title="result tab" role="tab">THIRD</a></li>
  </ul>
  <!-- tab panel containing tab panes -->
  <div class="tab-panel">
    <div class="tab-pane active" id="html-tab" role="tabpanel">
      FIRST CONTENT
    </div>
    <div class="tab-pane" id="css-tab" role="tabpanel">
      SECOND CONTENT
    </div>
    <div class="tab-pane" id="result-tab" role="tabpanel">
      THIRD CONTENT
    </div>
  </div>
</div>




var tabLink = document.querySelectorAll(".tab-link"),
        tabPane = document.querySelectorAll(".tab-pane")

    tabLink.forEach(function (item) {
      item.addEventListener('click', function (e) {

          // ADDS AND REMOVES ACTIVE CLASS ON TABLINKS
          tabLink.forEach(function (item) {
            item.classList.remove("active")
          });
          item.classList.add("active");

          // SOMEHOW EQUATE TAB LINKS TO TAB PANES
          let target = e.target.getAttribute('target')
          let activPanel = document.querySelectorAll(".tab-pane.active");
          // hide actives tabs
          activPanel.forEach(function (item) {
            item.classList.remove('active');
          });
          // show target tab
          document.getElementById(target).classList.add('active');
        },false)

    })

Answer 3

Try this ! I added a cool fade effet

 function showpane(evt, pane) { // Declare all variables var i, tabpane, tablinks; // Get all elements with class="tab-pane" and hide them tabpanes = document.getElementsByClassName("tab-pane"); for (i = 0; i < tabpanes.length; i++) { tabpanes[i].style.display = "none"; } // Get all elements with class="tab-link" and remove the class "active" tablinks = document.getElementsByClassName("tab-link"); for (i = 0; i < tablinks.length; i++) { tablinks[i].classList.remove("active"); } // Show the current tab, and add an "active" class to the button that opened the tab document.getElementById(pane).style.display = "block"; evt.currentTarget.className += " active"; }

 .nav-tabs { display: flex; align-items: center; padding: 1rem 2rem; list-style: none; background: lightblue; }.tab-link { margin-left: 4rem; padding: 1rem; border-radius: 1px; transition: 0.2s; display: block; } /*changes background of active tab link*/.tab-link.active { background: white; } /*hides tab panes*/.tab-pane { display: none; } /*shows active pane*/.tab-pane.active { display: block; }.tab-pane { animation: fadeEffect 1s; /* Fading effect takes 1 second */ } /* Go from zero to full opacity */ @keyframes fadeEffect { from {opacity: 0;} to {opacity: 1;} }

 <div class="tabs-wrapper"> <ul class="nav-tabs" role="tablist"> <li role="presentation"><a class="tab-link active" href="#html-tab" title="html tab" role="tab" onclick="showpane(event, 'html-tab')">FIRST</a></li> <li role="presentation"><a class="tab-link" href="#css-tab" title="css tab" role="tab" onclick="showpane(event, 'css-tab')">SECOND</a></li> <li role="presentation"><a class="tab-link" href="#result-tab" title="result tab" role="tab" onclick="showpane(event, 'result-tab')">THIRD</a></li> </ul> <!-- tab panel containing tab panes --> <div class="tab-panel"> <div class="tab-pane active" id="html-tab" role="tabpanel"> FIRST CONTENT </div> <div class="tab-pane" id="css-tab" role="tabpanel"> SECOND CONTENT </div> <div class="tab-pane" id="result-tab" role="tabpanel"> THIRD CONTENT </div> </div> </div>

Answer 4

 var tabLink = document.querySelectorAll(".tab-link"), tabPane = document.querySelectorAll(".tab-pane") tabLink.forEach(function(item) { item.addEventListener('click', function(e) { switch (e.target.classList[0]) { case 'one': tabPane[0].classList.add("active"); tabPane[1].classList.remove("active"); tabPane[2].classList.remove("active"); break; case 'two': tabPane[0].classList.remove("active"); tabPane[1].classList.add("active"); tabPane[2].classList.remove("active"); break; case 'three': tabPane[0].classList.remove("active"); tabPane[1].classList.remove("active"); tabPane[2].classList.add("active"); break; default: // whatever you'd like } }, false) })

 .nav-tabs { display: flex; align-items: center; padding: 1rem 2rem; list-style: none; background: lightblue; }.tab-link { margin-left: 4rem; padding: 1rem; border-radius: 1px; transition: 0.2s; display: block; } /*changes background of active tab link*/.tab-link.active { background: white; } /*hides tab panes*/.tab-pane { display: none; } /*shows active pane*/.tab-pane.active { display: block; }

 <div class="tabs-wrapper"> <ul class="nav-tabs" role="tablist"> <li role="presentation"><a class="one tab-link active" href="#html-tab" title="html tab" role="tab">FIRST</a></li> <li role="presentation"><a class="two tab-link" href="#css-tab" title="css tab" role="tab">SECOND</a></li> <li role="presentation"><a class="three tab-link" href="#result-tab" title="result tab" role="tab">THIRD</a></li> </ul> <!-- tab panel containing tab panes --> <div class="tab-panel"> <div class="tab-pane active" id="html-tab" role="tabpanel"> FIRST CONTENT </div> <div class="tab-pane" id="css-tab" role="tabpanel"> SECOND CONTENT </div> <div class="tab-pane" id="result-tab" role="tabpanel"> THIRD CONTENT </div> </div> </div>