编写由JavaScript而不是纯HTML解析的链接的最好方法是什么？(jQuery选项卡)

Question

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

所以对于Post 1，标签标签是#选项卡-1-1，#标签1-2，等等。

Post 2选项卡是# tab -2-1，#tab-2-2，etc....each选项卡集具有唯一的id。

对于每个帖子，我有一个购买按钮，在Tab 1内，链接到它的Tab 4，以显示该产品的购买选项。我试图找出使用这段代码跳转到选项卡4是否可以：

员额1：

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

员额2：

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

员额3：

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

以此类推。按下键将在每一页上显示10次。我读过内联javascript是不好的，这导致我创建这个帖子，因为我想使用最好的/最安全的方法。

我已经读过正确的方法，就是将函数放入js文件(不显眼的javaScript)，并使用id调用它，但是由于每次单击都会转到不同的选项卡哈希，所以我不知道该方法是否会工作，也不知道如何使它工作。我总共有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中的链接)与行为(如何使链接工作，在脚本中)分开。