切换（制作永久）和关闭突出显示＆amp;区分突出显示和重定向？

Question

如何（可能使用通常的怀疑 Javascript ），有一些（最初没有突出显示的链接），然后实现：

切换（制作永久）和关闭突出显示＆amp;区分突出显示和重定向？

点击一个字词会使高亮显示永久（切换开启）。
再次点击（切换后），该字词重定向到文章。
点击其他地方会删除高亮显示（切换关闭）。

编辑（澄清，问题被搁置后）：

切换突出显示

我了解此突出显示可以使用.addClass("active");和.removeClass("active");来处理，但不知道在添加Class("active")时如何包含链接和/或如何禁用链接何时删除Class。然后 CSS 需要（例如）.active{background:green}

切换重定向（链接跟随）

因此，现在可以看出preventDefault();在启用或禁用链接跟踪方面起着核心作用;因为，正如人们可以阅读its entry in the jQuery-api：

如果调用此方法，则不会触发事件的默认操作。

例如，点击的锚点不会将浏览器带到新的URL。

另一种方法可能是使用return false;。

2之间的区别与传播（或 “冒泡”） DOM 即可。关于这种差异，人们可以阅读 CSS-tricks 或者看看下面的答案 somethinghere，当他添加event.stopImmediatePropagation();来阻止它冒泡

两者之间存在以下差异：return false;本身也会阻止此传播，而preventDefault();则不会。

CSS-tricks-article sais：

function（）{return false;}

等于：

function（e）{e.preventDefault（）; e.stopPropagation（）;}

有关这种差异的更多文献可以在StackExchange上找到，它可能会有一些重复的帖子？

var anchors = document.getElementsByTagName('a'),
    length = anchors.length,
    index;

for (index = 0; index < length; index += 1) {
    anchors[index].onclick = function (e) {
        e.preventDefault();
        if (!(/\bhighlight\b/).test(e.target.className)) {
            e.target.className += ' highlight';
        }
    };
}

.blockElement {
    display:block;
    float: left;
    clear: left;
}
.highlight {
    background-color: yellow;
}

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

Answer 1

这是一个演示您想要实现的概念的示例。链接和信息发布在原始问题的评论中。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

当您点击任何链接时，请将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()。答案使用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(){})中，否则您必须将其添加到页面的末尾（因为尚未初始化元素）。

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

Answer 3

使用锚点onclick来运行javascript函数。如果之前没有点击过，请通过更改css突出显示它，然后返回false，以便不跟踪链接。如果之前已单击，则返回true，以便跟踪链接。

要检查链接是否已被＆＃39;点击，您可以为锚点使用onblur事件。

如何在第一次点击时突出显示链接;并在第二次点击时关注它，除非在其他地方点击，然后重新初始化非突出显示的状态？

切换（制作永久）和关闭突出显示＆amp;区分突出显示和重定向？

切换突出显示

切换重定向（链接跟随）

3 个答案:

更新

更新2

更新3

下面是一个片段：