jQuery的標籤 - 設置根據活動選項卡上單擊鏈接

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

得到它的工作如下： -

個

按鈕在主頁上

<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的查詢頁面

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 }); 
} 

}); 

基本上它是從第一頁的鏈接＃標籤後取值，然後用這個值來決定哪個選項卡設置爲活動選項卡。

Answer 2

是的，你需要傳遞一個URL變量比方說，你在標籤= X，其中X將通過1，2，或3，您將使用它來設置活動選項卡。要獲得URL變量，你可以簡單地通過JS解析查詢字符串，如下desribed：How can I get query string values in JavaScript?。

Answer 3

至於你的問題指出，有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 
}); 

});