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

debugcn 发表于 Dev

扎克·皮奇

我目前有一个切换功能来显示使用 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 了解不多/不够了解答案。先感谢您！

穆罕默德-优素福

1- 选择选择/点击的元素使用 $(this)

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

3- 要从未选择的 div 中删除类，请使用siblings()但toggle-item元素不是兄弟元素，然后您可以使用.parent().siblings().find('.toggle-item')then.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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。