html - Easy way to set active class with javascript

I tried to find the easiest way to set the active class to the active Navbar point.

My Code looks like this:

function setActive(i) {
    $(document).ready.getElementById(i).addClass("active");
}

<head>
  <script src=".3.1/jquery.min.js"></script>
  <script type="text/javascript" src="../js/main.js"></script>
  <script>
  		setActive("contact");
  </script>
</head>
<body>
  <a id="contact" class="nav-link" href="">Example</a>
</body>

I tried to find the easiest way to set the active class to the active Navbar point.

My Code looks like this:

function setActive(i) {
    $(document).ready.getElementById(i).addClass("active");
}

<head>
  <script src="https://ajax.googleapis./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script type="text/javascript" src="../js/main.js"></script>
  <script>
  		setActive("contact");
  </script>
</head>
<body>
  <a id="contact" class="nav-link" href="">Example</a>
</body>

Why is this not working?

Thanks for the help!

Share Improve this question edited Aug 1, 2018 at 21:30 lealceldeiro 15k6 gold badges54 silver badges84 bronze badges asked Aug 1, 2018 at 21:21 Wolly300 231 gold badge1 silver badge3 bronze badges

what does console tell you? – pwolaq Commented Aug 1, 2018 at 21:25
1 Classes are added like this element.classList.add('active') – pavi2410 Commented Aug 1, 2018 at 21:27
2 @Wolly300 looks like you are mixing up native js with jQuery on this line $(document).ready.getElementById(i).addClass("active"); you should pick one and stick with it. – Andrew L Commented Aug 1, 2018 at 21:28
do you use Jquery ? – عبدالرحمان Commented Aug 1, 2018 at 21:34
@Abderrahmane Look in the head section of the document in the code snippet. – Unmitigated Commented Aug 1, 2018 at 21:36

| Show 1 more ment

5 Answers 5

Sorted by: Reset to default 2

In jQuery, you use $().addClass(). You should call the function inside $(document).ready(), not have the function run only if the document has loaded.

In your setActive function, it looks like you are mixing up Javascript and jQuery. You should only use one or the other.

$(document).ready.getElementById(i).addClass("active");//this line is a syntax error

.active{
  color: green;
}

<head>
  <script src="https://ajax.googleapis./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script>
  function setActive(i) {
    $('#'+i).addClass("active");
  }
  $(document).ready(function(){
      setActive("contact");
  });
  </script>
</head>
<body>
  <a id="contact" class="nav-link" href="">Example</a>
</body>

With pure Javascript, you can use Element.classList.add() to add a class to an element.

.active{
  color: green;
}

<head>
      <script>
      function setActive(i) {
        document.getElementById(i).classList.add("active");
      }
     document.addEventListener("DOMContentLoaded", function(){
          setActive("contact");
      });
      </script>
    </head>
    <body>
      <a id="contact" class="nav-link" href="">Example</a>
    </body>

To set the contact active you need to this it this way. You already have jQuery in you code so it is more easy.

function setActive(tag){
    //This bloc is optinal. It will remove active class from all other elements. You may not need that
    $('body a').removeClass('active');
    //End optional block
    $(`#${tag}`).addClass('active');
}

$(document).ready(function(){
    setActive('contact')
});

please try:

function addActive(el){
    document.querySelector(el).classList.add("active");
}

You should call setActive("content") inside main.js inside a ready function

You are also missing the id selector (#) in your jQuery selector

$( document ).ready(function() {
    setActive("contact");
});

function setActive(id){
  $(`#${id}`).addClass("active");
}

.active{
 color: red
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="contact" class="nav-link" href="">Example</a>

Try this

function setActive(i) {
  document.getElementById(i).classList.add("active");
}
    
function setDisable(i) {
  document.getElementById(i).classList.remove("active");
}

.active{
  background-color: yellow;
  color: red;
}

<html>
    <body>
      <button type="button" onclick="setActive('demo')">
       Activate
      </button>
      <button type="button" onclick="setDisable('demo')">
       Disable
      </button>
      <p id="demo">Here</p>
    </body>
</html>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

html - Easy way to set active class with javascript - Stack Overflow

5 Answers 5

与本文相关的文章

评论列表(0)