Question

我在Wordpress中使用jquery选项卡如下： -

[tab name="Compliments Form"][contact-form-7 id="158" title="Compliments Form"][/tab]
[tab name="Complaints Form"][contact-form-7 id="159" title="Complaints Form"][/tab]
[tab name="Work for us"][contact-form-7 id="160" title="Central Morley - Work Form"][/tab]
[end_tabset]

我可以按如下方式设置“有效”标签： -

jQuery(document).ready(function() {
    jQuery('#tabs-1').tabs({ active: 1 }); // either 0, 1 or 2
});

基本上我在主页上有3个链接都来到同一页面，我想以某种方式根据点击的链接设置“活动标签”。

也许我需要从主页的链接中传递额外的内容，以便我可以确定我需要设置哪个标签，我只是不确定如何实现这一点，所以任何帮助都会非常感激！

以下是主页的示例链接： -

<a id="compliments-form" href="http://www.taxileeds.com/demo/enquiries/">

    <button>Compliment Form</button>

</a>

Answer 1

是的，您需要传入一个URL变量。假设您传入tab = X，其中X将为1,2或3，您将使用它来设置活动选项卡。要获取URL变量，您只需通过JS解析查询字符串，如下所示：How can I get query string values in JavaScript?。

Answer 2

正如您的问题所述，有3个链接：

<a id="compliments-form" href="http://www.taxileeds.com/demo/enquiries/">
    <button>Compliment Form</button>
</a>

我假设其他两个锚点为：

<a id="complaints-form" href="http://www.taxileeds.com/demo/efg/">
    <button>Compliment Form</button>
</a>

<a id="work-for-us" href="http://www.taxileeds.com/demo/cde/">
    <button>Compliment Form</button>
</a>

这个javascript代码适用于这种情况：

jQuery(document).ready(function() {
jQuery('#tabs-1').tabs({ active: 1 }); // default selected

$('#compliments-form').click(function(event){    
  event.preventDefault();
  jQuery('#tabs-1').tabs( "option", "active", 0 );
});

$('#compliments-form').click(function(event){    
  event.preventDefault();

  jQuery('#tabs-1').tabs( "option", "active", 1 ); // either 0, 1 or 2
});

$('#work-for-us').click(function(event){    
  event.preventDefault();  
  jQuery('#tabs-1').tabs( "option", "active", 2 ); // either 0, 1 or 2
});

});

Answer 3

按照以下方式工作： -

主页上的按钮

<a href="http://www.taxileeds.com/demo/enquiries/#compliments-form"><button>Compliments Form ›</button></a>

<a href="http://www.taxileeds.com/demo/enquiries/#complaints-form"><button>Complaints Form ›</button></a>

<a href="http://www.taxileeds.com/demo/enquiries/#work-for-us"><button>Work for Us ›</button></a>

jQuery on Inquiries Page

jQuery(document).ready(function() {

var myString = window.location.href.substring(window.location.href.lastIndexOf('#') + 1);

if (myString == 'compliments-form') {
        jQuery('#tabs-1').tabs({ active: 0 });
}
if (myString == 'complaints-form') {
        jQuery('#tabs-1').tabs({ active: 1 });
}
if (myString == 'work-for-us') {
        jQuery('#tabs-1').tabs({ active: 2 });
}

});

基本上，它从第一页的链接中取出＃标记后面的值，然后使用此值来决定将哪个标签设置为活动标签。

jQuery选项卡 - 根据单击的链接设置活动选项卡

3 个答案: