编写通过JavaScript而不是纯HTML解析的链接的最佳方法是什么？ （jQuery标签）

Question

我正在使用带有JQuery标签插件的Wordpress.org网站，每个页面共有10个帖子，每个帖子都有自己的JQuery标签集。

因此，对于Post 1，标签标记为＃tabs-1-1，＃taks 1-2等

帖子2标签是＃tabs-2-1，＃tabs-2-2等....每个标签集都有唯一的ID。

对于每个帖子，我在标签1中都有一个立即购买按钮，链接到它的标签4以显示产品的购买选项。我试图找出是否可以使用此代码跳转到选项卡4：

POST 1：

<a onclick="$('a[href=#tabs-1-4]').click();">BUY NOW</a>

POST 2：

<a onclick="$('a[href=#tabs-2-4]').click();">BUY NOW</a>

POST 3：

<a onclick="$('a[href=#tabs-3-4]').click();">BUY NOW</a>

依此类推。 onclick将在每页上出现10次。我已经读过内联javascript很糟糕，导致我创建这篇文章，因为我想尽可能使用最好/最安全的方法。

我已经阅读了正确的方法是将函数放入js文件（不显眼的javaScript）并使用id调用它，但由于每个onclick转到不同的tab hash，我不知道该方法是否有效或如何使它工作。我总共有400多个帖子，所以我会在js文件中编写400个不同的函数吗？

然后，如果可以使用它，可以使用哪个链接的问题：

<a onclick="$('a[href=#tabs-1-4]').click();">BUY NOW</a>
<a href="javascript:void(0)" onclick="$('a[href=#tabs-1-4]').click();">BUY NOW</a>
<a href="#" onclick="$('a[href=#tabs-2-4]').click(); return false;">BUY NOW</a>

Answer 1

如果您想要花哨并且支持html5，我可能会将每个链接都与此类似：

<a class="tabLink" data-href="#tabs-1-4">BUY NOW</a>
<a class="tabLink" data-href="#tabs-2-4">BUY NOW</a>

脚本（适用于所有链接）：

var jqTabHost = ".whateverTheNameOfYourTabElementIs";
$('a.tabLink').click(function() {
    //Something like (not sure exactly):
    var href = $(this).data('href');
    //EITHER
    $('a[href=' + href + ']').click();
    //OR (better)
    $(jqTabHost).tabs( "load", href.substring(1) );
    return false;
});

如果没有自定义属性支持，您可以使用href而不是data-href，并使用href使其不完全相同。

这背后的想法是保持代码尽可能短，并将数据（在HTML中链接的东西）与行为分开（如何使该链接在脚本中工作）。