Question

我试图找到将活动类设置为活动Navbar点的最简单方法。

我的代码如下：

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

<head>
  <script src="https://ajax.googleapis.com/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>

为什么这不起作用？

感谢您的帮助！

Answer 1

要将此联系人设置为活动状态，您需要这样做。您的代码中已经包含jQuery，因此更加简单。

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')
});

Answer 2

在jQuery中，您使用$().addClass()。您应该在function内调用$(document).ready()，而不是仅在文档加载后才运行该函数。

在您的setActive函数中，您似乎在混用Javascript和jQuery。您只能使用其中一个。

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

.active{
  color: green;
}

<head>
  <script src="https://ajax.googleapis.com/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>

使用纯Javascript，您可以使用Element.classList.add()向元素添加类。

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

Answer 3

请尝试：

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

Answer 4

您应该在现成的函数中的main.js内部调用setActive("content")

您还缺少jQuery选择器中的id选择器（#）

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

.active{
 color: red
}

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

Answer 5

尝试一下

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>

使用javascript设置活动类的简单方法

5 个答案: