在小提琴完美运行，但 JQuery 对网页没有影响

In fiddle perfectly running but NO effect of JQuery on web page

本文关键字：网页 有影响 JQuery 小提琴 完美 运行      更新时间：2023-09-26

我只是试图在点击时在 li 标签上添加和删除类。我尝试了小提琴，JQuery 工作正常，但相同的代码在本地主机上不起作用。 小提琴链接

这是我的页面 - 

<link rel="stylesheet" href="styles.css" />
<script src="jquery-1.7.2.min.js" type="text/javascript"></script>
<script language="javascript">
$('#cssmenu li').on('click', function(){
    $('li.active').removeClass('active');
    $(this).addClass('active');
});
</script>
</head>
<body>
<div id='cssmenu'>
<ul> 
  <li class='active'><a href="#"><span>Home</span></a></li> 
  <li><a href="Untitled-1.html" target="content"><span>About Us</span></a></li> 
  <li><a href="#"><span>Gallery</span></a></li> 
  <li><a href="#"><span>Alumni</span></a></li> 
  <li><a href="#"><span>Events</span></a></li> 
  <li><a href="#"><span>Polling</span></a></li> 
  <li><a href="#"><span>Feedback</span></a></li> 
  <li class='last'><a href="#"><span>Contact Us</span></a></li> 
</ul>   
</div>

这是 CSS 的一部分

#cssmenu li {
  float: left;
  margin: 0 5px 0 0;
  border: 1px solid transparent;
}
#cssmenu li a {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  padding: 8px 15px 9px 15px;
  display: block;
  text-decoration: none;
  color: #ffffff;
  border: 1px solid transparent;
  font-size: 16px;
}
#cssmenu li.active {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  border: 1px solid #36b0b6;
}
#cssmenu li.active a {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  display: block;
  background: #1e6468;
  border: 1px solid #133e40;
  -moz-box-shadow: inset 0 5px 10px #133e40;
  -webkit-box-shadow: inset 0 5px 10px #133e40;
  box-shadow: inset 0 5px 10px #133e40;
}

非常感谢任何输入，因为我知道我只有几步之遥，因为它已经在小提琴中做到了。

在创建该元素的 DOM 之前附加单击处理程序。将其移动到页面末尾或将其放在$(document).ready() 

<script language="javascript">
$(document).ready(function(){
  $('#cssmenu li').on('click', function(){
      $('li.active').removeClass('active');
      $(this).addClass('active');
  });
})
</script>

移动这个

<script language="javascript">
$('#cssmenu li').on('click', function(){
    $('li.active').removeClass('active');
    $(this).addClass('active');
});
</script>

或让它在 DOMContentLoaded 上执行<body>标签的末尾。

现在，它会在加载 DOM 之前执行，没有任何反应。

更新：

要回答您的评论，将脚本标签放在</body>标签之后并不是真的正确，请参阅此问题

无论如何，请尝试这样做。

$(window).load(function(){
  $('#cssmenu li').on('click', function(){
    $('li.active').removeClass('active');
    $(this).addClass('active');
  });
});
相关文章：