从超链接激活 aria Jquery 选项卡

Question

我对 Jquery 有点陌生，所以如果我从错误的方向接近这个，请告诉我。

我有一个包含基于 Jquery 的选项卡模块的目标页面。我想在单击另一个页面上的特定超链接时激活某个选项卡。

是否有任何内置方法可以实现此目的？或者当我定义的某个查询字符串变量在超链接上传递时，我是否需要在目标页面上放置额外的脚本来激活所选的选项卡？

假设选项卡所在的页面 www.example.com

我要激活的标签是：

<li id="tabChangeDirectDebit" class="change-direct-debit last ui-state-  
default ui-corner-top" role="tab" aria-controls="changeDirectDebit" aria-
labelledby="ui-id-5" aria-selected="false">
    <a href="#changeDirectDebit" class="ui-tabs-anchor" role="presentation" id="ui-id-5">
        <img src="~/media/images/DirectDebitTool/navigation/change-dd-amount.png?h=80&amp;w=140" class="inactive" alt="" width="140" height="80">
        <img src="~/media/images/DirectDebitTool/navigation/change-dd-amount-active.png?h=80&amp;w=140" class="active" alt="c" width="140" height="80">
        <div>
            <span>Change Direct Debit</span>
        </div>
    </a>
</li>

我可以通过在超链接上传递查询字符串或主题标签来做一些非常简单的事情吗？喜欢www.example.com#changeDirectDebit。或者这是否需要在目标页面上添加额外的脚本？

Answer 1

这取决于您将从哪里获得活动标签的标识符。

例1.hash

假设在上一页上，用户单击了 link，如下所示：http://path/to/page/#tab3

您将可以在 window.location.hash.

中访问 jQuery 中的 #tab3 字符串（或者实际上是纯 JS）

示例 2. 获取参数 假设在上一页上，用户单击了这样的 link：http://path/to/page/?active_tab=myTab

你可以用一点snippet by Chris Coyier。

function getQueryVariable(variable) {
       var query = window.location.search.substring(1);
       var vars = query.split("&");
       for (var i=0; i<vars.length; i++) {
           var pair = vars[i].split("=");
           if(pair[0] == variable){return pair[1];}
       }
       return(false);
}

使用此函数，您将获得如下标识符：

var targetTab = getQueryVariable('active_tab'); //this would return *myTab* in my example

每个选项卡都需要一些标识符，可以是数据属性或 ID 的形式，也可以使用 jQuery .index() 通过标识符找到所需的选项卡。或者你知道的任何其他方式。

从超链接激活 aria Jquery 选项卡

activating an aria Jquery tab from hyperlink

html

jquery

hyperlink