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.哈希

让我们假设在上一页上，用户点击了这样的链接：http://path/to/page/#tab3

您可以在#tab3中访问jQuery（或实际上是纯JS）中的window.location.hash字符串。

示例2.获取参数 让我们假设在上一页上用户点击了这样的链接：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选项卡

1 个答案: