将目标元素上的点击事件匹配到单独的元素

问题描述 投票：0回答：2

我希望能够通过click事件将选项卡链接与选项卡窗格链接。

我有在每个选项卡链接上放置/删除活动类的代码，但是我正在努力将其与相关的选项卡窗格进行匹配。

我将通过e.target事件来执行此操作，并通过匹配数组位置来执行此操作吗？还是要使用标签链接的href属性并将其与标签窗格的#id相匹配？

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>
javascript html css javascript-events this
2个回答
0
投票

我用这个link from w3schools来给出答案。关键是为标签本身分配某种外观，以使其了解目标内容。然后，您可以管理选项卡窗格的显示以反映出来。 

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>
0
投票

您需要使用getAttribute（）函数

我为您制作了一个jsfiddle：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)

    })
0
投票

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>
0
投票

尝试一下！我添加了一个很酷的淡入效果

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>
最新问题
© www.soinside.com 2019 - 2025. All rights reserved.