我只是尝试在点击时添加和删除li标签上的类。我试过小提琴,JQuery工作正常但是同样的代码不能在localhost上工作。 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;
}
任何输入都非常受欢迎,因为我知道我只有几步之遥,因为它已经在小提琴中。
答案 0 :(得分:1)
在创建该元素的DOM之前附加单击处理程序。将其移至页面末尾或将其放在$(document).ready()
<script language="javascript">
$(document).ready(function(){
$('#cssmenu li').on('click', function(){
$('li.active').removeClass('active');
$(this).addClass('active');
});
})
</script>
答案 1 :(得分:1)
移动此
<script language="javascript">
$('#cssmenu li').on('click', function(){
$('li.active').removeClass('active');
$(this).addClass('active');
});
</script>
在<body>
标记的末尾,或者在DOMContentLoaded上执行。
现在它在加载DOM之前执行,没有任何反应。
更新:
要回答您的评论,将{{1>}标记后的脚本标记放在上并不正确,请参阅this question
无论如何,请尝试这样做。
</body>