data атрибуты в html коде

Question

Всем привет, в общем я новенький в js, так что есть такой простенький вопросик. У меня есть страница, в ней есть основные элементы(кнопки), при помощи которых, идет переключение табов(data атрибутов) с основной информацией. Так вот, реализацию переключения сделал, только понять не могу, почему прописав такую конструкцию

let tabId = currentBtn.getAttribute("data-tab", "data-circle");

я не смогу присвоить в эту переменную два дата атрибута. Почитал вроде доки, ничего не увидел(мб я немножко слепой).

В общем, вот есть табы

<button data-tab="#tab_1" data-circle="#tab_4" class="link_title active">Home</button>
<button data-tab="#tab_2" data-circle="#tab_5" class="link_title active">About</button>
<button data-tab="#tab_3" data-circle="#tab_6" class="link_title active">Contact</button>

И дальше всякие блоки с инфой, на которых ориентируются табы кнопки. Так вот, я не понимаю, как присвоить еще дата атрибуты, когда нужно еще сделать так, что бы номер страницы показывался на кружочках(как актив класс).

<div class="container_circles">
    <div id="tab_4" class="circle active"></div>
    <div id="tab_5" class="circle"></div>
    <div id="tab_6" class="circle"></div>
 </div>

И вот js код

let activeBtn = document.querySelectorAll(".link_title"),
pageInfo = document.querySelectorAll(".page_info"),
circles = document.getElementsByClassName("circle");

activeBtn.forEach(function(item){
item.addEventListener("click", function(){
    let currentBtn = item;
    console.log(currentBtn);
    let tabId = currentBtn.getAttribute("data-tab", "data-circle");
    console.log(tabId);
    let currentTab = document.querySelector(tabId);
    console.log(currentTab);

    activeBtn.forEach(function(item){
        item.classList.remove("active_info");
        item.classList.remove("active");
    });

    pageInfo.forEach(function(item){
        item.classList.remove("active_info");
    });

    

    currentBtn.classList.add("active_info");
    currentBtn.classList.add("active");
    currentTab.classList.add("active_info");
});

});

Пока просто тренируюсь со скриптами, и от поддержки точно не откажусь :)

Заранее всем спасибо!

P.S. Вот css актива

.active{
  background-color: rgb(0, 0, 0);
  border: 1.2mm ridge rgba(170, 50, 220, .6);
}
.active_info{
display: flex;
position: relative;
justify-content: center;
align-items: center;
}

Answer 1

Думаю вы что-то такое искали. У вас проблема с селектором который должен выбрать нужный таб. Далее делаете удаляете стили назначаете новые ....

let activeBtn = document.querySelectorAll(".link_title"),
pageInfo = document.querySelectorAll(".page_info"),
circles = document.getElementsByClassName("circle");

activeBtn.forEach(function(item){
item.addEventListener("click", function(){
    let currentBtn = item;
    console.log(currentBtn);
    let tabId = currentBtn.getAttribute("data-tab");
    console.log(tabId);
    let currentTab = document.querySelector(`div[id=${tabId.split("#")[1]}]`);
    console.log(currentTab);

    activeBtn.forEach(function(button){
        button.classList.remove("active_info");
        button.classList.remove("active");
    });

    pageInfo.forEach(function(page){
        page.classList.remove("active_info");
    });

    currentBtn.classList.add("active_info");
    currentBtn.classList.add("active");
    currentTab.classList.add("active_info");
});
});

<button data-tab="#tab_1" data-circle="#tab_4" class="link_title active">Home</button>
<button data-tab="#tab_2" data-circle="#tab_5" class="link_title active">About</button>
<button data-tab="#tab_3" data-circle="#tab_6" class="link_title active">Contact</button>


<div class="container_circles">
  <div id="tab_1" class="circle active">
   
  </div>
  <div id="tab_2" class="circle">
    
  </div>
  <div id="tab_3" class="circle">
    
  </div>
</div>

Answer 2

Такая "конструкция" не работает

let tabId = currentBtn.getAttribute("data-tab", "data-circle");

потому что метод getAttribute - принимает один параметр. Остальные просто игнорируются.

Если тебе нужно значение сразу двух атрибутов, необходимо вызывать этот метод каждый раз для значения атрибута:

let tabId = currentBtn.getAttribute("data-tab");
let circleId = currentBtn.getAttribute("data-circle");

Также, data-атрибуты можно получить с помощью свойства dataset, в этом случае можно получить два значения:

let {tab, circle} = currentBtn.dataset;

БЛОГ НА HUSL

data атрибуты в html коде

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