---
description: >-
  https://stackoverflow.com/questions/45306883/jquery-i-want-to-add-an-active-class-to-the-linked-id-of-an-anchor-tag
---

# jQuery I want to add an active class to the linked ID of an anchor tag style2.track360.xyz (ok)

2 cái này kết hợp với

[https://app.gitbook.com/@javascriptuse/s/advanced/keep-url-unaffected-when-anchor-link-is-clicked-ok](https://app.gitbook.com/@javascriptuse/s/advanced/keep-url-unaffected-when-anchor-link-is-clicked-ok)

![](https://2726517656-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M1E4Gk2ppVKb4olmnun%2F-MR3KWqsEgwvBDLZy_Gy%2F-MR3KkQOwijZo7ziXomj%2FScreenshot_1.png?alt=media\&token=1140ad7c-eae2-4e41-a4a9-c78270ca8d11)

```
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <title>Document</title>
  <style type="text/css" media="screen">
    .active {
      background: #faa;
    }
  </style>
</head>

<body>
  <ul class="no-bullet inline">
    <li><a class="scroller" href="#a"><strong>A</strong></a></li>
    <li><a class="scroller" href="#b"><strong>B</strong></a></li>
    <li><a class="scroller" href="#c"><strong>C</strong></a></li>
  </ul>
  <h4 class="alpha-heading active" id="a"><strong>A</strong></h4>
  <h4 class="alpha-heading" id="b"><strong>B</strong></h4>
  <h4 class="alpha-heading" id="c"><strong>C</strong></h4>
  <script type="text/javascript">
    $('.scroller').click(function() {
      $($(this).attr('href')).addClass('active').siblings().removeClass('active')
    })
  </script>
</body>

</html>
```

Full code

```
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <title>Document</title>
  <style type="text/css" media="screen">
    .active {
      background: #faa;
    }
  </style>
</head>

<body>
  <ul class="no-bullet inline">
    <li><a class="scroller" href="#a"><strong>A</strong></a></li>
    <li><a class="scroller" href="#b"><strong>B</strong></a></li>
    <li><a class="scroller" href="#c"><strong>C</strong></a></li>
  </ul>
  <h4 class="alpha-heading active" id="a"><strong>A</strong></h4>
  <h4 class="alpha-heading" id="b"><strong>B</strong></h4>
  <h4 class="alpha-heading" id="c"><strong>C</strong></h4>
  <script type="text/javascript">
    $('.scroller').click(function(e) {
    	e.preventDefault();
    	var hash = this.hash;
      $($(this).attr('href')).addClass('active').siblings().removeClass('active');
      window.location.hash = "";
    })
  </script>
</body>

</html>
```
