CODEWITHSUNDEEP
htmljquerycss
Stasa Bastrica
Stasa Bastrica

Reputation: 7

How to add active class to anchor tag inside li element and change current element appearance?

I want to add active class to current element, so that clicked element can inherit active style.

JQuery code doesn't work. :(

$('.side-track li').click(function() {
  $('.side-track li a.active').removeClass('active');
  $(this).find("a").addClass('active');
});
.side-track {
  font-family: 'GalanoGrotesque-Regular';
  font-size: .9rem;
  float: right;
  transform: rotate(180deg);
  color: var(--lightGray);
}

.side-track li {
  writing-mode: vertical-rl;
}

.active {
  padding-left: 3px;
  background: linear-gradient(0deg, rgba(181, 195, 186, 1) 53%, rgba(12, 138, 104, 1) 53%) no-repeat;
  background-size: 3px 100%;
  background-position: left right;
  color: var(--grassGreen);
  font-weight: 700;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="side-container sm:hidden md:hidden -my-64 p-4 xl:-my-56 xl:text-lg">
  <ul class="side-track space-y-4">
    <li class="active"><a href="">Quick summary</a></li>
    <li><a href="">Challenge</a></li>
    <li><a href="">Solution</a></li>
    <li><a href="">Technologies</a></li>
    <li><a href="">Results</a></li>
  </ul>
</div>

Upvotes: 0

Views: 88

Answers (1)

mplungjan
mplungjan

Reputation: 177851

Something like this?

Adding preventDefault() stops the link

$('.side-track').on("click", "li", function(e) {
  e.preventDefault(); // stop link
  $(this).closest("li") // active is on the LI 
    .addClass('active')
    .siblings().removeClass('active');
});
.side-track {
  font-family: 'GalanoGrotesque-Regular';
  font-size: .9rem;
  float: right;
  transform: rotate(180deg);
  color: var(--lightGray);
}

.side-track li {
  writing-mode: vertical-rl;
}

.active {
  padding-left: 3px;
  background: linear-gradient(0deg, rgba(181, 195, 186, 1) 53%, rgba(12, 138, 104, 1) 53%) no-repeat;
  background-size: 3px 100%;
  background-position: left right;
  color: var(--grassGreen);
  font-weight: 700;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="side-container sm:hidden md:hidden -my-64 p-4 xl:-my-56 xl:text-lg">
  <ul class="side-track space-y-4">
    <li class="active"><a href="">Quick summary</a></li>
    <li><a href="">Challenge</a></li>
    <li><a href="">Solution</a></li>
    <li><a href="">Technologies</a></li>
    <li><a href="">Results</a></li>
  </ul>
</div>

Upvotes: 1

Related Questions