我是新手，我似乎无法加载 jQuery。我正在尝试切换由 id 标识的元素的类。
目标是让点击的元素具有“菜单选择”类，而元素具有“未选择”类
我相信我已经将所有相关的 HTML 放在下面。可能是我在我的 HTML 或 CSS 中犯了一个错误，尽管它的工作方式与我尝试添加 JS 之前没有什么不同。
我是否错误地导入了 jQuery？
我写的脚本正确吗？
我的操作/放置顺序是否正确？
代码:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#left-cafe').click(function(){
$('#left-cafe').removeClass('unselected');
$('#left-cafe').addClass('menu-selected');
$('#left-breakfast').removeClass('menu-selected');
$('#left-breakfast').addClass('unselected');
});
});
</script>
<style>
.left-menu{
background-color:rgb(200,200,200);
display:block;
float:left;
width:100%;
height:50px;
}
.left-menu-list{
width:100%;
height:100%;
}
.left-menu-list li{
display:block;
float:left;
width:20%;
height:100%;
font-size:35px;
line-height:75px;
}
.menu-selected{
background-color:rgb(150,150,150);
}
.unselected{
display:none;
}
</style>
</head>
<body>
<div class="left-menu"> <!-- Start left-menu -->
<ul class="left-menu-list">
<li class="menu-selected" id="left-cafe">Cafe</li>
<li class="unselected" id="left-breakfast">Breakfast</li>
</ul>
</div> <!-- End left-menu -->
</body>
</html>
最佳答案
您的代码没有任何 jQuery 错误。但是有逻辑错误。
$(document).ready(function(){
$('#left-cafe').click(function(){
$('#left-cafe').toggleClass(' menu-selected unselected');
$('#left-breakfast').toggleClass(' menu-selected unselected');
});
}); .left-menu {
background-color:rgba(200, 200, 200,1);
display:block;
float:left;
width:100%;
height:50px;
}
.left-menu-list {
width:100%;
height:100%;
}
.left-menu-list li {
display:block;
float:left;
width:20%;
height:100%;
font-size:35px;
line-height:75px;
}
.menu-selected {
background-color:rgba(150, 150, 150, 1);
}
.unselected {
display:none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<body>
<div class="left-menu">
<!-- Start left-menu -->
<ul class="left-menu-list">
<li class="menu-selected" id="left-cafe">Cafe</li>
<li class="unselected" id="left-breakfast">Breakfast</li>
</ul>
</div>您正在尝试删除并再次添加相同的类。所以你的输出没有区别。相反，您必须切换类(class)。
关于javascript - jQuery 未加载，这是新的，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29405711/