Удалить класс из всех элементов, кроме активного элемента - PullRequest
Новая
       56

Удалить класс из всех элементов, кроме активного элемента

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

У меня есть набор тегов привязки, к которым я добавляю активный класс с помощью метода forEach. Как мне получить его, чтобы при добавлении активного класса в один тег привязки он удалял этот активный класс из всех других элементов тегов привязки?

У меня также должен быть такой, чтобы первый тег привязки начинался с активного класса на нем (что я сделал через CSS)

CodePen: https://codepen.io/emilychews/pen/gOaXdMr

var tabLink = document.querySelectorAll('.tab-link'),
    tabPane = document.querySelectorAll('.tab-pane')

tabLink.forEach(function(item){

    item.addEventListener('click', function(){
        item.classList.add('active')
    }, 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: .2s;
    display: block;
}

.tab-link.active {
    background: white;
}
<ul class="nav-tabs"role="tablist">
    <li role="presentation"><a class="tab-link active" href="#html-tab" title="html tab" role="tab">HTML</a></li>
    <li role="presentation"><a class="tab-link" href="#css-tab" title="css tab" role="tab">CSS</a></li>
    <li role="presentation"><a class="tab-link" href="#result-tab" title="result tab" role="tab">Result</a></li>
</ul>

Ответы [ 4 ]

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

Внутри слушателя события click вы можете просто удалить все активные классы из всех дочерних элементов внутри .tab-link перед добавлением последнего активного класса в элемент, по которому щелкнули.

Я добавил только три строки кода ниже к исходному коду, чтобы достичь того, что вы хотели. 

var tabLink = document.querySelectorAll('.tab-link'),
    tabPane = document.querySelectorAll('.tab-pane')

tabLink.forEach(function(item){
    item.addEventListener('click', function(){
        tabLink.forEach(function(item) {
          item.classList.remove('active')
        })
        item.classList.add('active')
    }, 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: .2s;
    display: block;
}

.tab-link.active {
    background: white;
}
<ul class="nav-tabs"role="tablist">
    <li role="presentation"><a class="tab-link active" href="#html-tab" title="html tab" role="tab">HTML</a></li>
    <li role="presentation"><a class="tab-link" href="#css-tab" title="css tab" role="tab">CSS</a></li>
    <li role="presentation"><a class="tab-link" href="#result-tab" title="result tab" role="tab">Result</a></li>
</ul>
1 голос
/ 04 мая 2020

Если вы используете jQuery, вы можете сделать это, используя несколько строк кода.

Ваниль JS

var tabLink = document.querySelectorAll('.tab-link');

tabLink.forEach(function(item){

    item.addEventListener('click', function(){
        document.querySelector('.active').classList.remove('active');
        item.classList.add('active');
    }, false)

})

jQuery

$(document).on('click', '.tab-link', function(){
  $('.tab-link').removeClass('active'); // remove active for all first.
  $(this).addClass('active'); // add active for clicked element
})
0 голосов
/ 04 мая 2020

Я создал вторую функцию, которая будет вызываться в событии click. Эта функция ищет элемент, в котором активен класс, и удаляет класс. 

var tabLink = document.querySelectorAll('.tab-link'),
    tabPane = document.querySelectorAll('.tab-pane')

function clearActiveItemMenu(){
	tabLink.forEach(function(item){
  	if(item.classList.contains('active')){
    	item.classList.remove('active');
    }
  });
}

tabLink.forEach(function(item){

    item.addEventListener('click', function(){
        clearActiveItemMenu();
        item.classList.add('active')
    }, 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: .2s;
    display: block;
}

.tab-link.active {
    background: white;
}
<ul class="nav-tabs"role="tablist">
    <li role="presentation"><a class="tab-link active" href="#html-tab" title="html tab" role="tab">HTML</a></li>
    <li role="presentation"><a class="tab-link" href="#css-tab" title="css tab" role="tab">CSS</a></li>
    <li role="presentation"><a class="tab-link" href="#result-tab" title="result tab" role="tab">Result</a></li>
</ul>
0 голосов
/ 04 мая 2020

так что в основном просто присвойте каждому свой идентификатор, а затем в функции просто удалите класс из каждого и затем добавьте класс. 

var tabLink = document.querySelectorAll('.tab-link'),
    tabPane = document.querySelectorAll('.tab-pane')

tabLink.forEach(function(item){

    item.addEventListener('click', function(){
        document.getElementById('a').classList.remove('active');
        document.getElementById('b').classList.remove('active');
        document.getElementById('c').classList.remove('active');
        item.classList.add('active')
    }, 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: .2s;
    display: block;
}

.tab-link.active {
    background: white;
}
<ul class="nav-tabs"role="tablist">
    <li role="presentation"><a id='a' class="tab-link active" href="#html-tab" title="html tab" role="tab">HTML</a></li>
    <li role="presentation"><a id='b' class="tab-link" href="#css-tab" title="css tab" role="tab">CSS</a></li>
    <li role="presentation"><a id='c' class="tab-link" href="#result-tab" title="result tab" role="tab">Result</a></li>
</ul>
...