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();
    });
});

此代码将跟踪最后选择的元素，并从中删除该项目有效的类，祝您好运。

Answer 3

在纯JavaScript中，您可以通过以下方式使用className：

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

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

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

几乎与 èlement.removeAttribute（'class'）; （几乎但不完全相同），因为将.className设置为空值会保留该类（因此更易于再次填充），并使用removeAttribute会从element中完全删除该属性（因此您必须再次添加它以设置一个，不会有问题，因为方法.setAttribute('class', value)将设置属性并在不存在的情况下添加属性。）

在这种情况下，JQuery并不是真正写得更快或更容易，并且无论如何纯Javascript都将更快。即使我喜欢JQuery选择器（写起来更快，也更容易阅读）和.removeClass方法（-Mohamed-Youssef中的思想是用同类型错误替换兄弟姐妹代替兄弟，但答案也是正确的）。 / p>

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

3 个答案: