Question

假设我有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>

请给我解决方案。即使单击链接并进入下一页，如何将该链接保持为突出显示。即使它必须在下一页突出显示，直到点击其他链接。

Answer 1

您可以添加onclick函数来更改元素的类。

如果您的应用程序中有jQuery，那就像

一样简单

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

Answer 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/

Answer 3

＆＃13;

$('.mylist li').click(function() {

  $('.mylist li').removeClass('active');
  $(this).addClass('active');

});

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 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');
    });
});

如何点击特定链接并使其他链接正常，我们如何突出显示链接？

4 个答案: