Question

我是jQuery和编程的新手。我完成了我的第一个网站并决定使用jQuery来解决大部分代码，不是因为它更好，而是因为我需要练习。

现在，该网站有一个链接列表，我使用下面重复12次的代码：

$('#id_of_the_div').on('click', function () {
    window.open("http://example.com/", '_blank');
});

现在听起来可能有更好的方法，因为我的网站只有12个链接但是，如果我有30或50个链接怎么办？考虑到该站点现在只有HTML和jQuery，没有PHP或服务器端代码。

一个工作示例：http://jsfiddle.net/sergeen/RB3aZ/

谢谢！

Answer 1

你的分歧概念是错误的。如果要添加链接，请使用锚标记。

<html>
<a href="http://example.com/">Example</a>
</html>

Answer 2

我建议您使用为此任务创建的HTML元素，我们的老朋友<a>;）

<a href="http://myurl.com">My text</a>

默认情况下，它看起来像一个蓝色链接，我认为这是你要避免的。但是更改链接的样式要容易得多，而不是尝试使用通常不会重定向到其他页面的其他元素。

将其添加到CSS文件或页面上的<style>标记：

a {
    text-decoration: none;  /* no underline */
    color: black;           /* changes the color of the text*/
    background-color: red;  /* changes the background color*/
    padding: 10px;          /*this makes sure you have some open space so your item looks like a button */
  }

请注意，此CSS代码段会更改页面上所有<a>元素的样式。它看起来像一个按钮，但如果你单击它，它仍然像链接一样工作。

<强>更新

如果您还想在将鼠标悬停在链接上时删除下划线，还要将以下内容添加到CSS中：

a:hover {   /* :hover is the state of the item when the mouse is over it, but you're not clicking (yet) */
    text-decoration: none;  /* no underline */
  }

Answer 3

我猜您使用的是div，因为它更容易设置样式，但在使用<a> <{1}}

的display:block;标记时，您仍然可以这样做

Like THIS DEMO

或者，如果您更喜欢现在拥有的，请使用以下内容：

    $('.link').on('click', function () {
        window.open($(this).data('link'), '_blank');
    })
;

DEMO HERE

个人选择一个是更好的解决方案。

Answer 4

而不是使用像这样的东西

$('#js').on('click', function () {
    window.open("http://jsfiddle.net/", '_blank');
});

你可以删除js部分并在html中替换

<a class="link" href="http://jsfiddle.net/" target="_blank" id="js">JSFIDDLE</a>

然后将css更改为类链接

的样式锚元素

Answer 5

您可以将switch语句与当前标记一起使用 -

$('.link').on('click', function () {
    switch (this.id) {
        case 'js':
            window.open("http://jsfiddle.net/", '_blank');
            break;
        case 'careers':
            window.open("http://careers.stackoverflow.com/", '_blank');
            break;
    }
});

或者您可以通过添加网址信息来更改标记，以帮助您提高效率 -

<div class="link" id="js" data-url="http://jsfiddle.net">JSFIDDLE</div>
<div class="link" id="careers" data-url="http://careers.stackoverflow.com">CAREERS @ STACKOVERFLOW</div>

然后你的代码块变短了 -

$('.link').on('click', function () {
    var thisURL = $(this).data('url');
    window.open(thisURL, '_blank');
});

但是你应该切换到链接的锚标签。你仍然可以使用我在这里提供的那种编码。

Answer 6

为此

创建功能

function goNewLink(id,url){
    $("#"+id).on('click', function () {
        window.open(url, '_blank');
    });
}

使用goNewLink（“id”，“www.example.com”）;

Answer 7

如果您只想使用div标签，因为它们的形状，有一种更简单的方法。使用锚标记并应用display: block（默认情况下，锚标记通常为display: inline，其中width等样式不适用）：

.link {
    display: block; /* make them "rectangular" elements */
    text-decoration: none; /* remove underlines -- optional */
    /* the rest is the same */
}

HTML：

<div class="container">
    <a class="link" id="js" href="http://jsfiddle.net/" target="_blank">JSFIDDLE</a>
    <a class="link" id="careers" href="http://careers.stackoverflow.com/" target="_blank">CAREERS @ STACKOVERFLOW</a>
    <a class="link" id="meta" href="http://meta.stackoverflow.com/" target="_blank">META @ STACKOVERFLOW</a>
    <a class="link" id="stack" href="http://stackoverflow.com/" target="_blank">STACKOVERFLOW @ STACKOVERFLOW</a>
    <a class="link" id="alist" href="http://alistapart.com/" target="_blank">A LIST APART</a>
</div>

http://jsfiddle.net/mblase75/j5UP5/

使用jQuery解决多个链接有一个更短的方法吗？

7 个答案: