当单击特定链接并使其他链接正常时，我们如何突出显示该链接？ [复制]答案

【问题标题】：How can we highlight the link when that particular link is clicked and making other links normal? [duplicate]当单击特定链接并使其他链接正常时，我们如何突出显示该链接？ [复制]
【发布时间】：2017-05-09 19:06:49
【问题描述】：

假设我有 3 个链接。如果我单击其中一个，则该特定链接必须突出显示并以粗体或任何其他方式显示。当我们再次单击另一个链接时，其余的必须恢复正常。

链接可以做吗？哪位大神可以给个解决办法吗？

我已经编写了这段代码，但它没有在其他页面中突出显示，这是我的代码

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <script>
 $(function() {
        $('#menu span').click(function(e) {
            $('div').find('span').removeClass('active');
            $(this).addClass('active');
        });
    });
 </script>
<title>Header</title>
<style>
 #menu span a {
    display:inline-block;
    color:blue;
    cursor:pointer;
    padding:10px;
        text-decoration:none;
}
.active { 
    font-weight: bold;
    border:1px solid;

}
</style>
</head>
<body>
<h2 style="color:blue">Employee Details</h2>
<div id="menu">
    <span> <a href="${pageContext.request.contextPath}/bulkImport">Menu 1</a></span>
    <span ><a href="${pageContext.request.contextPath}/fileUploadForm">Menu 2</a></span>
    <span ><a href="${pageContext.request.contextPath}/deleteMultiple">Menu 3</a></span>
</div>
</body>
</html>

请给我解决方案。即使单击链接并转到下一页，如何保持该链接突出显示。即使它必须在下一页中突出显示，直到单击另一个链接。

【问题讨论】：

你有没有尝试过什么？
你熟悉伪元素吗？尝试在您的链接中使用:active、:hover 和:focus。

标签： java html css

【解决方案1】：

你可以添加一个onclick函数来改变元素的类。

如果你的应用程序中有 jQuery，那么它就像

一样简单

<a href="http://foo.bar" onclick="$(this).addClass('clicked')">click me</a>

【讨论】：

【解决方案2】：

这里你已经有了使用jQuery JavaScript 框架的现成解决方案：

HTML：

<div id="menu">
    <a href="" title="">Item 1</a>
    <a href="" title="">Item 2</a>
    <a href="" title="">Item 3</a>
</div>

CSS：

div#menu a { padding: 10px; }
div#menu a.active { font-weight: bold; }

JavaScript：

$(function() {
    $('div#menu a').click(function(e) {
        e.preventDefault();

        var $this = $(this);

        $this.closest('div').find('a').removeClass('active');
        $this.addClass('active');
    });
});

jsFiddle：https://jsfiddle.net/ps4af646/

【讨论】：

投反对票者：揭露自己并发表评论，说明你的行为......如果你敢......

【解决方案3】：

$('.mylist li').click(function() {

  $('.mylist li').removeClass('active');
  $(this).addClass('active');

});

.active {
  background: red;
}
li {
  display: inline;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="mylist">
  <li class="active"><a href="#">link 1</a>
  </li>
  <li><a href="#">link 2</a>
  </li>
  <li><a href="#">link 3</a>
  </li>
</ul>

【讨论】：

【解决方案4】：

请查看此链接JS Fiddle

CSS

  #menu span a {
    display:inline-block;
    color:blue;
    cursor:pointer;
    padding:10px;
        text-decoration:none;
}
.active { 
    font-weight: bold;
    border:1px solid;

}

HTML

    <div id="menu">
    <span> <a href="#">Menu 1</a></span>
    <span ><a href="#">Menu 2</a></span>
    <span ><a href="#">Menu 3</a></span>
</div>

JQuery

    $(function() {
    $('#menu span').click(function(e) {
        $('div').find('span').removeClass('active');
        $(this).addClass('active');
    });
});

【讨论】：

OMFG。很好的答案复制。
@Krzysztof Trzos 你的 jquery 和我的 jquery 不同，答案取决于 jquery。
@Empiro 你在开玩笑吧？您从 jsFiddle 复制并稍微编辑了我的答案和代码。