问题：
我认为我的代码中存在一些javascript问题，因此请提供css和javascript，以便当用户单击链接时，它的住处变为活动状态，并且链接的颜色发生变化。
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="/resources/css/effect.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<!-- START MAIN -->
<div id="main" style="padding-left: 0px; background-color: white;">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<!-- START WRAPPER -->
<div>
<style>
body {
background-color:#f1f1f1!important;
color: #000;
font-size: 16px;
font-family: verdana,helvetica,arial,sans-serif;
}
.nav-side-menu {
border-left: 1px solid green;
border-right:1px solid green;
margin-left: 0px;
overflow: auto;
font-family: verdana;
font-size: 15px;
font-weight: 200;
background-color: #f1f1f1!important;
position: fixed;
width: 300px;
height: 100%;
color: #000!important;
}
.nav-side-menu .brand {
background-color: #23282e;
color:#f1f1f1!important;
line-height: 50px;
display: block;
text-align: center;
font-size: 16px;
}
.nav-side-menu .toggle-btn {
display: none;
}
.nav-side-menu ul,
.nav-side-menu li {
list-style: none;
padding: 5px 5px;
margin: 0px;
line-height: 35px;
cursor: pointer;
}
.nav-side-menu li {
border-bottom: 1px solid green;
}
.nav-side-menu li:hover {
border-left: 3px solid #d19b3d;
background-color: #4CAF50;
/* color: #ffffff; */
color:blue;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
@media (max-width: 1200px){
.nav-side-menu {
position: relative;
margin-left: 0px;
width: 100%;
margin-bottom: 10px;
}
.nav-side-menu .toggle-btn {
display: block;
cursor: pointer;
position: absolute;
right: 10px;
top: 10px;
z-index: 10 !important;
padding: 3px;
background-color: #ffffff;
color: #000;
width: 40px;
text-align: center;
}
.brand {
text-align: left !important;
font-size: 22px;
padding-left: 20px;
line-height: 50px !important;
}
}
@media (min-width: 1200px) {
.nav-side-menu .menu-list .menu-content {
display: block;
}
}
.well{
display:none;}
.main {
margin-left: 0px; /* Same as the width of the sidenav */
font-size: 16px; /* Increased text to enable scrolling */
padding: 0px 10px;
}
@media screen and (max-height: 450px) {
.sidenav {
padding-top: 15px;
}
.sidenav a {
font-size: 6px;
}
}
</style>
<div class="row col-lg-12">
<div class="col">
</div>
<div class="col-lg-3" >
<div class="nav-side-menu">
<div class="brand">Topics</div>
<i class="fa fa-bars fa-2x toggle-btn" data-toggle="collapse" data-target="#menu-content"></i>
<div class="menu-list">
<ul id="menu-content" class="menu-content collapse out"><c:forEach items="${tutorial}" var="tutoriallist">
<li style="padding-left: 20px;"><a href="<c:url value='/tutorial/afterClickingTutorialTopics?id=${tutoriallist.id} '/>" >
<c:if test="${not empty tutoriallist.title}">
<c:out value="${tutoriallist.title}" />
</c:if></li>
</a> </c:forEach></ul>
</div>
</div>
</div>
<div class="col-lg-8">
<div align="justify">
<table>
<tbody><br>
<%-- <c:forEach items="${tutorialdata}" var="tutoriallist"> --%>
<tr>
<table><tr><td>
<c:if test="${not empty tutoriallist.id}">
<a href="<c:url value='/tutorial/afterClickingTutorialTopicsNext?id=${tutoriallist.id-1} '/>" >
<h4 style="color:green;font:fantasy;float:left;"><b><<< Prev</b></h4></a>
</c:if></td>
<td><c:if test="${not empty tutoriallist.id}">
<a href="<c:url value='/tutorial/afterClickingTutorialTopicsNext?id=${tutoriallist.id+1} '/>" >
<h4 style="color:green;font:fantasy;float:right;"><b>Next >>></b></h4></a>
</c:if></td></tr></table>
<h5 style="font-family: erdana,helvetica,arial,sans-serif;font-size: 29px;
color: #610B38;">
<c:if test="${not empty tutoriallist.title}">
<c:out value="${tutoriallist.title}" />
</c:if>
<br>
</h5>
<p><c:if test="${not empty tutoriallist.content}">
<c:out value="${tutoriallist.content}" /></c:if></p>
<h4><b><c:if test="${not empty tutoriallist.heading1}">
<c:out value="${tutoriallist.heading1}" /></c:if></b></h4>
<p><c:if test="${not empty tutoriallist.content1}">
<c:out value="${tutoriallist.content1}" /></c:if></p>
<h4><b><c:if test="${not empty tutoriallist.heading2}">
<c:out value="${tutoriallist.heading2}" /></c:if></b></h4>
<p><c:if test="${not empty tutoriallist.content2}">
<c:out value="${tutoriallist.content2}" /></c:if></p>
<h4><b><c:if test="${not empty tutoriallist.heading3}">
<c:out value="${tutoriallist.heading3}" /></c:if></b></h4>
<p><c:if test="${not empty tutoriallist.content3}">
<c:out value="${tutoriallist.content3}" /></c:if></p>
<h4><b><c:if test="${not empty tutoriallist.heading4}">
<c:out value="${tutoriallist.heading4}" /></c:if></b></h4>
<p><c:if test="${not empty tutoriallist.content4}">
<pre><c:out value="${tutoriallist.content4}" /></pre></c:if></p>
</tr></tbody></table>
</div></div></div></div>
</div>
</body>
</html>