javascript - 在 fiddle 中完美运行但 JQuery 对网页没有影响

标签 javascript jquery html css jsfiddle

<分区>

我只是想在点击时添加和删除 li 标签上的类。我试过 fiddle ,JQuery 工作正常,但相同的代码在本地主机上不起作用。 Fiddle link

这是我的页面 -

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

非常感谢任何输入,因为我知道我只差几步之遥,因为它已经在 fiddle 中完成了。

最佳答案

在为该元素创建 DOM 之前附加点击处理程序。要么将它移到页面末尾,要么将它放在 $(document).ready()

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

</script>

关于javascript - 在 fiddle 中完美运行但 JQuery 对网页没有影响,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35975245/

上一篇:javascript - 动画添加边框(增长然后收缩)

下一篇:javascript - 样式标签中的 CSS 未显示在元素中?

相关文章:

javascript - 使用 javascript 显示隐藏的 HTML 元素

jquery - 单击按钮时的 Animate.css Fliptext 效果不佳

html - 使用 Bootstrap 默认选择单选按钮

html - CSS下拉菜单中的自适应宽度

javascript - 如何在 Dojo 中过滤/查询 FilteringSelect

javascript - 缩放 body 浏览器

javascript - WordPress的。在光标到达下一个选项卡之前,下拉菜单消失。仅在登录时

javascript - 保留被拖动的元素

javascript - Codeigniter 上的 Sweet Alert js

html - UL/LI 列表项全 Angular