Как реализовать простейший TabView средствами JS?

Question

Нужно сделать скрипт на Кнопки Tab что находятся на скрине ниже, чтобы они не были статичны, а подсвечивались когда я навожу на них курсор и соответственно текст изменялся на другой, и чтобы это все выводилось в консоль...

Вот скрипт:

const tabsBtn = document.querySelectorAll(".tabs_nav-btn");
     tabsBtn.forEach(function(item) {
     item.addEventListener("click", function() {
          console.log("Click");
     });
});

Вот HTML

<body>
    <div class="tabs">
        <div class="tabs__nav">
            <button class="tabs__nav-btn  active" type="button">Tab 1</button>
            <button class="tabs__nav-btn" type="button">Tab 2</button>
            <button class="tabs__nav-btn" type="button">Tab 3</button>
        </div>
        <div class="tabs__content">
            <div class="tabs__item  active">
                <p>It is a long established fact ...</p>
                                                       
            </div>

            <div class="tabs__item">
                <p>It is a long established fact that...</p>
            </div>

            <div class="tabs__item">
                <p>The point of using Lorem Ipsum is that...</p>

            </div>
        </div>
    </div>
</body>
    <link rel="stylesheet" href="Styles.css">
        <script src="bum.js"> </script>

Answer 1

Как вариант

tabsButtons = [...document.querySelectorAll(".tabs__nav-btn")];
tabsContent = [...document.querySelectorAll(".tabs__content .tabs__item")];
let indexTab = 0;

const changeTab = () => {
    const index = tabsButtons
      .indexOf(tabsButtons.find(e => e === event.target))
    tabsButtons[indexTab].classList.remove('active');
    tabsContent[indexTab].classList.remove('active');
    indexTab=index
    tabsButtons[indexTab].classList.add('active');
    tabsContent[indexTab].classList.add('active');
}


tabsButtons.forEach(function(item) {
   item.addEventListener("click", changeTab, false);
});

<html>
  <style>
     .tabs__nav-btn.active {
        color: red;
        
      } 
     .tabs__item{
        display: none;
      }
      .tabs__item.active {
        display: block;
      }
      
  </style>
<body>
    <div class="tabs">
        <div class="tabs__nav">
            <button class="tabs__nav-btn  active" type="button">Tab 1</button>
            <button class="tabs__nav-btn" type="button">Tab 2</button>
            <button class="tabs__nav-btn" type="button">Tab 3</button>
        </div>
        <div class="tabs__content">
            <div class="tabs__item  active">
                <p>It is a long established fact ...</p>
                                                       
            </div>

            <div class="tabs__item">
                <p>It is a long established fact that...</p>
            </div>

            <div class="tabs__item">
                <p>The point of using Lorem Ipsum is that...</p>

            </div>
        </div>
    </div>
    <script>

    </script>   
</body>
 </html>

БЛОГ НА HUSL

Как реализовать простейший TabView средствами JS?

Ответы (1 шт):