Question

问题：

一切正常，单击鼠标悬停即可正常工作，并且链接处于打开状态，但是问题是单击链接后，它开始活动并且链接的颜色没有改变。

我认为我的代码中存在一些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>&lt;&lt;&lt; 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 &gt;&gt;&gt;</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>

链接即使打开也无法激活

0 个答案: