Сопоставить событие клика на целевом элементе с отдельным элементом - PullRequest
Новая
       143

Сопоставить событие клика на целевом элементе с отдельным элементом

0 голосов
/ 04 мая 2020

Я хочу иметь возможность связать ссылку вкладки с панелью вкладок с помощью события щелчка.

У меня есть код, который помещает / удаляет активный класс для каждой ссылки вкладки, но я изо всех сил пытаюсь сопоставить это с соответствующей панелью вкладок.

Могу ли я сделать это с помощью события 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>

Ответы [ 4 ]

1 голос
/ 04 мая 2020

Вам нужно использовать функцию 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)

    })
1 голос
/ 04 мая 2020

Я использовал эту ссылку от 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 голосов
/ 04 мая 2020

Попробуй это! Я добавил крутой эффект исчезновения 

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>
0 голосов
/ 04 мая 2020 

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>
...