javascript - 关于 jquery 单击添加 CSS 和其他元素以删除 CSS。怎么做？

Question

我有一个项目，当我点击titleA时，titleA的所有block都必须添加黄色样式，而点击titleB时，titleB页面必须添加黄色样式，并且titleA的黄色样式会被移除！

但我不知道这个。如何达到效果，需要大家帮忙，谢谢。

  $('#js-title1').on('click',function(){
    $('#js-title1').addClass('active'); //點擊到的增加樣式
  　$('#js-title2').removeClass('active') //同層其他元素移除樣式
  })

body {
  padding: 30px;
}

.wrap {
  display: flex;
  margin-bottom: 100px;
}
.wrap .demo {
  font-weight: 900;
  margin: 30px;
  text-decoration: none;
  color: #222;
}

.wrap-2 {
  display: flex;
}
.wrap-2 .demo {
  font-weight: 900;
  margin: 30px;
  text-decoration: none;
  color: #222;
}

.active {
  position: relative;
}

.active::after {
  content: "";
  position: absolute;
  bottom: 2px;
  left: 0;
  right: 0;
  display: block;
  width: 50px;
  height: 8px;
  background: #FFEB50;
  z-index: -1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="wrap">
  <li>
    <a href="javascript:;"  class="demo" id="js-title1">titleA</a>
  </li>
  <li>
    <a href="javascript:;"  class="demo" id="js-title2">titleB</a>
  </li>
</ul>

<ul class="wrap-2">
  <li>
    <a href="javascript:;"  class="demo" id="js-title1">titleA</a>
  </li>
  <li>
    <a href="javascript:;"  class="demo" id="js-title2">titleB</a>
  </li>
</ul>

标签： javascriptjquerycss

Answer 1

有多个js-title1 & js-title2，不要使用ID，考虑使用css类名。

  $('.js-title1').on('click',function(){
    $('.js-title1').addClass('active'); //點擊到的增加樣式
  　$('.js-title2').removeClass('active') //同層其他元素移除樣式
  })

  $('.js-title2').on('click',function(){
    $('.js-title2').addClass('active'); //點擊到的增加樣式
  　$('.js-title1').removeClass('active') //同層其他元素移除樣式
  })

body {
  padding: 30px;
}

.wrap {
  display: flex;
  margin-bottom: 100px;
}
.wrap .demo {
  font-weight: 900;
  margin: 30px;
  text-decoration: none;
  color: #222;
}

.wrap-2 {
  display: flex;
}
.wrap-2 .demo {
  font-weight: 900;
  margin: 30px;
  text-decoration: none;
  color: #222;
}

.active {
  position: relative;
}

.active::after {
  content: "";
  position: absolute;
  bottom: 2px;
  left: 0;
  right: 0;
  display: block;
  width: 50px;
  height: 8px;
  background: #FFEB50;
  z-index: -1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="wrap">
  <li>
    <a href="javascript:;"  class="demo js-title1">titleA</a>
  </li>
  <li>
    <a href="javascript:;"  class="demo js-title2">titleB</a>
  </li>
</ul>

<ul class="wrap-2">
  <li>
    <a href="javascript:;"  class="demo js-title1">titleA</a>
  </li>
  <li>
    <a href="javascript:;"  class="demo js-title2">titleB</a>
  </li>
</ul>