admin管理员组

文章数量:1356924

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!

  • javascript
  • html
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 Wolly300Wolly300 231 gold badge1 silver badge3 bronze badges 6
  • 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

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>

本文标签： htmlEasy way to set active class with javascriptStack Overflow

版权声明：本文标题：html - Easy way to set active class with javascript - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744059663a2583894.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。