About jquery Click to add CSS and other elements to remove CSS. How to do it?

Question

I have a project that when I click titleA, all blocks of titleA must be added with a yellow style, and when titleB is clicked, a yellow style must be added to the titleB page, and the yellow style of titleA will be removed!

But I don’t know this. How to achieve the effect, I need some help from everyone, thank you.

  $('#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>

ProDec · Accepted Answer · 2021-10-29 05:40:42Z

There are multiple js-title1 & js-title2, do not use ID, consider to use css class name.

  $('.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>

Andy · Accepted Answer · 2021-10-29 05:54:46Z

1

IDs must be unique. You can't have more than one on the same page. Perhaps use a data attribute instead. Here's a stripped down example.

// 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>

Additional documentation

Template/string literals

edited Oct 29, 2021 at 5:54

answered Oct 29, 2021 at 5:43

Andy

63.6k13 gold badges72 silver badges99 bronze badges

2 Comments

AWEI Over a year ago

Hello~ But this method cannot add yellow style when clicking titleB, and remove the yellow style of titleA. I wonder if my operation method is wrong?

Andy Over a year ago

I've updated my answer. @AWEI. It now uses data attributes to store the original id.

Ayush Kumar · Accepted Answer · 2021-10-29 08:25:15Z

1

Instead of the id attribute use the class attribute

and in jQuery, get the elements with . instead of #

edited Oct 29, 2021 at 8:25

Ayush Kumar

9823 gold badges15 silver badges31 bronze badges

answered Oct 29, 2021 at 5:42

mcrdy455

1071 gold badge1 silver badge7 bronze badges

Comments

Esterified · Accepted Answer · 2022-07-22 01:00:56Z

1

Other than unique ids you should use ‘event.currentTarget’ or ‘$(this)’ to refer to the element and can use ‘.toggleClass()’ to toggle classes. This will simplify the code and logic.

const groups=[$("[id=js-title2]"), $("[id~='js-title1']")]

groups[0].on('click',function(e){
    groups[0].toggleClass('active');
    groups[1].removeClass('active');
  }) 
  
 groups[1].on('click',function(e){
    groups[0].removeClass('active');
    groups[1].toggleClass('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>

edited Jul 22, 2022 at 1:00

answered Oct 29, 2021 at 5:44

Esterified

931 gold badge3 silver badges11 bronze badges

1 Comment

AWEI Over a year ago

Hello~ Since I learned jquery not long ago, I am very interested in the method you said~ but I don't know how to write it~ Can you please provide a template so that I can learn it?

Collectives™ on Stack Overflow

About jquery Click to add CSS and other elements to remove CSS. How to do it?

4 Answers 4

Comments

2 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related