首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >在按顺序排列的单词序列中:"Word1,Word2,Word3":如何在"Word1“和"Word3”上有一个而只有一个超链接?因此,在一个链接中跳过一个单词?

在按顺序排列的单词序列中:"Word1,Word2,Word3":如何在"Word1“和"Word3”上有一个而只有一个超链接?因此,在一个链接中跳过一个单词?
EN

Stack Overflow用户
提问于 2015-02-08 09:40:34
回答 6查看 418关注 0票数 1

如何在超链接中跳过一个单词?

想象一下一个随机有序的单词序列:

... Word 1 Word 2 Word3 ...

如何才能让1统一(即不是两个单独的链接)超链接 on Word 1 & Word 3

即:当一个人悬停在Word 1Word 3上时,观众会立即注意到超链接将导致一个页面,该页面涵盖了这两个单词的含义(无论a:hover的CSS在特定文档中是什么,都可以看到)。

其结果将是:

Word 1 Word3 ... Word 2 ...

重要的注意事项:但是,与其有两个单独的(在本例中是粗体格式的超链接),它们将是统一的为一个单一的超链接。再次:例如,通过在Word 1Word 3上同时包含text-decoraiton:underline,可以在CSS中可视化。

可选:

最好也可以添加一个第二,其他超链接Word 2

用例示例:

在句子中:

“这不需要任何开放的(Word 1)膀胱(Word 2)手术(Word 3)。”

如果1能在Word 1Word3上统一超链接,那就太好了。这个例子澄清了跳过这个词的超级链接的用处:Word 2当然不应该包含在第一个统一链接中,因为膀胱维基百科汉与开放的手术没有多大关系-维基百科。

其结果将是:

“这不需要任何打开膀胱外科手术。”

关键问题:相反,、open、和上的超链接应该是,将统一为一个超链接。

可选:

最好也可以添加一个第二,其他超链接Word 2

“这不需要任何打开 膀胱 外科手术。”

以上的重要评论,也适用于此。

EN

Stack Overflow用户

发布于 2015-02-08 14:29:15

如果这是你想要达到的目标,那么:

Html:

代码语言:javascript
复制
<a href="http://www.wikipedia.org">
    <span class="d">Link 1</span> 
    <span class="b">Link 2</span> 
    <span class="d">Link 1</span> 
    <span class="b">Link 2</span>
    <span class="d">Link 1</span> 
    <span class="b">Link 2</span> 
</a>

Css

代码语言:javascript
复制
a {
    text-decoration:none;
}
.d {
    color:blue;
    text-decoration:underline;
}
.d.fake-hover {
    background:blue;
    color:#fff;
    text-decoration:none;
}
.b {
    color:darkRed;
    text-decoration:underline;
}
.b.fake-hover {
    background:darkRed;
    color:#fff;
    text-decoration:none;
}

Javascript:

代码语言:javascript
复制
var elems = document.getElementsByClassName('d');
var otherElems = document.getElementsByClassName('b');
var allElems = document.getElementsByTagName('span');
var _href = 'http://stackoverflow.com';

function fakeIt(what, el) {
    var els = (el.classList.contains('d')) ? elems : otherElems;
    for (var i = 0, x = els.length; i < x; i++) {
        (what == 'hover') ? els[i].classList.add('fake-hover') : els[i].classList.remove('fake-hover');
    }
}

function addCustomLink(e) {
    e.preventDefault();
    location.href = _href;
}

for (var i = 0, x = allElems.length; i < x; i++) {
    var el = allElems[i];
    el.addEventListener('mouseover', function(e) {
        fakeIt('hover', e.target);
    });
    el.addEventListener('mouseout', function(e) {
        fakeIt('out', e.target);
    });
    if (el.className == 'b') {
        el.addEventListener('click', function(e) {
            addCustomLink(e);
        });
    }
};

显然,在jsFiddle中,我不能使用document.location.href,所以您必须手动编辑addCustomLink函数。

小提琴在这里

票数 0
EN
查看全部 6 条回答
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/28392538

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档