这里有一个示例，演示了您想要实现的目标的概念。链接和信息被张贴在原始问题下的评论中。

var anchors = document.getElementsByTagName('a');
document.body.addEventListener('click', function (e) {
    [].forEach.call(anchors, function (anchor) {
        if (e.target !== anchor) {
            anchor.classList.remove('highlight');
            anchor.classList.remove('follow');
        }
    });
}, false);
[].forEach.call(anchors, function (anchor) {
    anchor.addEventListener('click', (function (e) {
        var clicked = false;
        return function (e) {
            if (!clicked) {
                e.preventDefault();
                e.target.classList.add('highlight');
                clicked = true;
            } else {
                clicked = e.target.classList.contains('highlight');
                if (clicked) {
                    e.target.classList.add('follow');
                    e.target.classList.remove('highlight');
                } else {
                    e.preventDefault();
                    e.target.classList.add('highlight')
                    clicked = true;
                }
            }
        };
    }()), false);
});

body {
    position:absolute;
    top:0;
    bottom:0;
    right:0;
    left:0;
}
html {
    height:100%;
}
.blockElement {
    display:block;
    float: left;
    clear: left;
}
.highlight {
    background-color: yellow;
}
.follow {
    background-color: red;
}

<a href="#one" class="blockElement">Jump to One</a>
<a href="#two" class="blockElement">Jump to Two</a>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<div id="one">One</div>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<div id="two">Two</div>

当您单击任何链接时，将highlight类添加到其中，并防止默认情况下在链接没有此类时停止跟随该链接。。

/* Take each "a" in your DOM and apply a click handler. */
$("a").click(function(event){
    /* Check if the highlight class is already applied. */
    if(!$(this).hasClass("highlight")){
        /* If not, use preventDefault to stop following the link. */
        event.preventDefault();
        /* Also stop the event from bubbling up to the document as a click. */
        event.stopImmediatePropagation();
        /* Then apply it. */
        $(this).addClass("highlight");
    }
});

当您单击其他任何位置时，请检查您是否正在单击具有唯一highlighted类的。如果没有，请从页面上的任何现有链接中删除该类。如果希望在突出显示其他内容时防止发生任何突出显示，请在If语句中使用preventDefault()。Answer使用jQuery，但它可以用javascript完成。

$(document).click(function(event){
    /* Check if the clicked target has the highlighted class. */
    if(!$(event.target).hasClass("highlight")){
        /* If not, remove the class from any element on the page. */
        $(".highlight").removeClass("highlight");
    }
});

更新

我最初使用了一个全局变量来存储当前点击的内容，但这是不必要的，除非你想突出显示多个。在这种情况下，制作一个全局变量，并使用jQuery add()函数将其添加到高亮显示的中。

更新2

我把代码缩短了一点，清理干净了。此外，您必须将整个内容封装在$(document).ready(function(){})中，否则您将不得不将其添加到页面的末尾（因为还没有初始化a元素）。

更新3

这里是踢球者（感谢评论）-当你点击链接时，你也在点击文档。这是因为一个名为Bubbling的效果——气泡从单击的元素开始，但它会在DOM中冒泡，直到碰到窗口对象。我之前在代码中对它进行了修改，添加了event.stopImmediatePropagation();——它按照罐头上的说明——它是stops immediate propagation或bubbling。

以下是一个片段：

$(document).ready(function(){
  $(document).click(function(event){
    if(!$(event.target).hasClass("highlight")){
      $(".highlight").removeClass("highlight");
    }
  });
  $("a").each(function(){
    $(this).click(function(event){
      if(!$(this).hasClass("highlight")){
        event.preventDefault();
        event.stopImmediatePropagation();
        $(this).addClass("highlight");
      }
    });
  });
});

.highlight { 
  background: red; 
  color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<a href="http://www.stackoverflow.com">Stack Overflow Highlighting</a>

使用锚点的onclick来运行javascript函数。如果它以前没有被点击过，那么通过更改css来突出显示它，并返回false，这样链接就不会被关注。如果它以前被点击过，那么返回true，这样链接就会被关注。

为了检查链接是否已被"点击掉"，您可以为锚点使用onblur事件。