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

Question

我希望能够通过单击事件 link 带有选项卡窗格的选项卡 link。

我有 places/removes 每个选项卡 link 上的活动 class 的代码，但我正在努力将其与相关的选项卡窗格匹配。

我会通过 e.target 事件并通过匹配数组位置来完成吗？或者使用选项卡 link 的 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>

Answer 1

我用这个 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>

Answer 2

您需要使用 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)

    })

Answer 3

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>

Answer 4

试试这个！我添加了一个很酷的淡入淡出效果

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>

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

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

html

javascript

css

this

dom-events