關于jquery點擊添加CSS等元素洗掉CSS。怎么做？

我有一個專案，當我點擊titleA時，titleA的所有塊都必須添加黃色樣式，而當單擊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>

uj5u.com熱心網友回復：

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>

uj5u.com熱心網友回復：

除了唯一的 id，你應該使用 'event.currentTarget()' 或 '$(this)' 來參考元素，并且可以使用 '.toggleClass()' 來切換類。這將簡化代碼和邏輯。

uj5u.com熱心網友回復：

ID必須是唯一的。同一頁面上不能有多個。也許改用資料屬性。這是一個精簡的示例。

// When any title is clicked on
$('.demo').on('click', function() {

  // Get the id from the dataset
  const id = $(this).data('id');

  // Remove all the active classes
  $('.demo').removeClass('active');

  // Add a class to all those elements that
  // have a data-id that matches the id
  $(`[data-id="${id}"`).addClass('active');
});

.active { background: #FFEB50; }
.demo:hover { cursor: pointer; }

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

附加檔案

• 模板/字串文字

uj5u.com熱心網友回復：

id使用class屬性代替屬性

在 jQuery 中，使用.而不是獲取元素#

標籤：javascript 查询 css

上一篇：檢查屬性和值是否存在于div中

下一篇：日期轉換導致時區問題