如何将类应用于仅单击/选定的 div

Question

我目前有一个切换功能来显示使用 jQuery 完美运行的不同内容。下面是我的代码！

$(document).ready(function() {
  $('.tab-nav-wrapper div .toggle-item').click(function() {
    $('.tab-content-wrapper > div').hide();
    $('.tab-content-wrapper > div').eq($(this).parent().index()).show();
  });
});

.item-active {
  -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.25);
  -moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.25);
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.25);
  border-radius: 8px;
}

.tab2-c,
.tab3-c,
.tab4-c {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="tab-nav-wrapper">
  <div class="one">
    <div class="toggle-item">
      <h3>Item One</h3>
    </div>
  </div>
  <div class="two">
    <div class="toggle-item">
      <h3>Item Two</h3>
    </div>
  </div>
  <div class="three">
    <div class="toggle-item">
      <h3>Item Three</h3>
    </div>
  </div>
  <div class="four">
    <div class="toggle-item">
      <h3>Item Four</h3>
    </div>
  </div>
</div>

<div class="tab-content-wrapper">
  <div class="tab1-c">
    <p>This is ONE</p>
  </div>
  <div class="tab2-c">
    <p>This is TWO</p>
  </div>
  <div class="tab3-c">
    <p>This is THREE</p>
  </div>
  <div class="tab4-c">
    <p>This is FOUR</p>
  </div>
</div>

我想仅将 CSS 类“item-active”应用于活动/选定的“toggle-item”。我知道我真的很接近......我只是不太了解 JS/jQuery 来完全得到答案。提前谢谢你！

Answer 1

1- 要选择选定/单击的元素，请使用 $(this)

2- 要添加/删除类，请使用 .addClass(); 和 .removeClass()

3- 要从未选择的 div 中删除类，请使用 siblings()，但当 toggle-item 元素不是兄弟元素时，您可以使用 .parent().siblings().find('.toggle-item') 然后 .removeClass()

$(document).ready(function() {
    $('.tab-nav-wrapper div .toggle-item').click(function(){  
        $(this).addClass('item-active').parent().siblings().find('.toggle-item').removeClass('item-active');
        $('.tab-content-wrapper > div').hide().eq($(this).parent().index()).show();
    });
});

.item-active {
    -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.25);
    -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.25);
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.25);
    border-radius: 8px;
}
.tab2-c, .tab3-c, .tab4-c {
    display:none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tab-nav-wrapper">
  <div class="one">
    <div class="toggle-item">
      <h3>Item One</h3>
    </div>
  </div>
  <div class="two">
    <div class="toggle-item">
      <h3>Item Two</h3>
    </div>
  </div>
  <div class="three">
    <div class="toggle-item">
      <h3>Item Three</h3>
    </div>
  </div>
  <div class="four">
    <div class="toggle-item">
      <h3>Item Four</h3>
    </div>
  </div>
</div>

<div class="tab-content-wrapper">
  <div class="tab1-c"><p>This is ONE</p></div> 
  <div class="tab2-c"><p>This is TWO</p></div> 
  <div class="tab3-c"><p>This is THREE</p></div> 
  <div class="tab4-c"><p>This is FOUR</p></div> 
</div>

Answer 2

你应该使用 jquery 函数 addClass() 所以你的代码将是：

$(document).ready(function() {
    $('.tab-nav-wrapper div .toggle-item').click(function(){  
      $(this).addClass('item-active');
        $('.tab-content-wrapper > div').hide();
        $('.tab-content-wrapper > div').eq($(this).parent().index()).show();
    });
});

这将在您每次单击一个元素时激活该类，但如果您只想选择焦点元素（而不是另一个），您的代码应该是这样的：

var lastSelected = null;
$(document).ready(function() {
    $('.tab-nav-wrapper div .toggle-item').click(function(){ 
      if(lastSelected != null) lastSelected.removeClass('item-active');
        $(this).addClass('item-active');
        lastSelected =$(this);
        $('.tab-content-wrapper > div').hide();
        $('.tab-content-wrapper > div').eq($(this).parent().index()).show();
    });
});

此代码将跟踪最后选择的元素，并从中删除 item-active 类，祝你好运。

Answer 3

在纯 JavaScript 中，您可以这样使用 className：

将class属性值改为newClass element.className='newClass';

也使用许多类 element.className='newClass anotherClass';

甚至检索所有编写空白类名的 CSS 类 element.className='';

将几乎相同 èelement.removeAttribute('class'); （几乎但不完全相同）因为将 .className 设置为空值会保留类（因此更容易再次填充）并使用 removeAttribute 从元素中完全删除属性（因此您必须再次添加它才能设置一个，即两者都不是问题，因为.setAttribute('class', value) 方法将设置属性并在不存在时添加它）。

在这种情况下，JQuery 并没有真正更快地编写或更容易，而且纯 Javascript 无论如何都会更快。即使我喜欢 JQuery 选择器（写起来更快，也更容易阅读）和 .removeClass 方法（请注意 -Mohamed-Youssef 用类型错误但答案也是正确的兄弟姐妹替换兄弟姐妹）。