I am having trouble getting the jQuery to load properly. My goal is to toggle classes on specific items identified by their ID.
When an item is clicked, I want it to have the class "menu-selected" while the other item has the class "unselected."
I have included all the necessary HTML below. I'm not sure if there's a mistake in my HTML or CSS, as the functionality hasn't changed since I added the JS code.
Could I have imported jQuery incorrectly?
Is there an issue with my script?
Have I placed everything in the correct order?
Code:
<!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>