jQuery选项卡以编程方式从代码中调用基于URL的选项卡

Question

情况

正如您在下面的屏幕截图中看到的，我的网站区域使用标签来分割用户信息中心。顶部的选项卡索引被声明为URL，因此jQuery在运行时创建引用。我希望用户能够单击“此处获取免费内容”链接，系统将调用“免费内容”选项卡。我们暂时将该URL称为“testserver / user / free-content”

问题

现在，我知道如何在页面上将标签声明为div并且具有我可能分配的静态ID时以编程方式处理这种情况但是，在这种情况下，我并不感到羞耻地说它让我在我之前有点卡住了甚至开始了。 如果我在链接上设置了一个ID，jQuery会覆盖它，所以我不能使用这种方法。

解决方案的开始

我想到的是以下内容，抱歉，目前我没有小提琴，因为如果我进步，我会更新问题。

• 用户点击链接，jQuery通过检查它是否具有类（'tab-url-call'）
来获取事件
• 暂时保存网址属性
• 循环选项卡索引
  • 检查URL属性是否与存储的临时值
  相匹配
  • 如果匹配，请拨打此标签
  • 这一点让我知道该怎么做
• 下一步

更新 - 额外信息

根据要求，这里有一些用于演示当前结构的HTML

<div id="user-tabs" class="tabs">
    <ul>
        <li>
            <a href="#tab-user-home">Welcome</a>
        </li>
        <li>
            <a href="testserver/user/free-content">Free content</a>
        </li>
        <li>
            <a href="testserver/user/learning">Learning</a>
        </li>
    </ul>

    <div id="tab-user-home">
        <h3>You current have freen content "showing"</h3>
        <p>
            This is just an information box to highlight that the user has an
            option set to show free content and inform them that they can 
            reach it via the tab controls or click
            <a
                class="tab-url-call" 
                href="testserver/user/free-content"
            >
            here for free content
            </a>
        </p>
    </div>
</div>

感谢您抽出宝贵时间阅读我的问题。

Answer 1

抽象的是你要找的是

//register a click event handler for elements with class tab-url-call
$(document).on('click', '.tab-url-call', function(e){
    e.preventDefault();
    //you need to place the selector for the tab header element here
    //find the anchor element with the same href as the clicked element which is inside the tab header element
    $('tabheader').find('a[href="' + $(this).attr('href') + '"]').click();
})