如何(可能使用通常可疑的Javascript),有几个(最初是非突出显示的链接),然后实现:
打开(使其永久)和关闭高亮显示&区分突出显示和重定向
- 单击一个术语将使高亮显示永久(打开)
- 再次点击(打开后)该术语将重定向到文章
- 单击其他位置可删除高亮显示(关闭)
编辑(在问题被搁置后澄清):
切换高亮显示
我知道这种突出显示可以使用.addClass("active");
和.removeClass("active");
来处理,但不知道如何在添加Class("active")
时包括链接和/或如何在删除Class
时禁用链接CSS则需要(例如).active{background:green}
切换重定向(链接跟随)
- 因此,现在发现
preventDefault();
在启用或禁用链路跟随方面起着核心作用;因为,正如人们在jQueryapi中的条目中所读到的那样:
- 如果调用此方法,则不会触发事件的默认操作
- 例如,单击的锚点不会将浏览器带到新的URL
- 另一种方法可能是使用
return false;
2之间的差异与传播有关(或"冒泡")DOM。关于这种差异,人们可以在CSS技巧或者通过以下方式查看以下答案什么的,当他添加event.stopImmediatePropagation();
以停止此操作时冒泡
两者之间的区别如下:return false;
本身也阻止了这种传播,而preventDefault();
则没有。
CSS技巧文章sais:
函数(){return false;}
等于:
函数(e){e.preventDefault();e.stopPropagation();}
关于这种差异的更多文献可以在StackExchange上找到,其中可能有一些重复的帖子?
- 什么';s e.preventDefault()之间的区别;并返回false
- event.prventDefault()与return false
- event.prventDefault()与return false(无jQuery)
- 差异-";e.preventDefault()"以及";return false&"
var anchors = document.getElementsByTagName('a'),
length = anchors.length,
index;
for (index = 0; index < length; index += 1) {
anchors[index].onclick = function (e) {
e.preventDefault();
if (!(/bhighlightb/).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>
这里有一个示例,演示了您想要实现的目标的概念。链接和信息被张贴在原始问题下的评论中。
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事件。