0

情况

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

问题

现在，我知道如何在页面上将选项卡在div上声明并具有静态ID时如何处理这种情况，但是在这种情况下，我觉得很羞愧. 如果我在链接上设置一个 ID，jQuery 会覆盖它，所以我不能使用这种方法。

解决方案开始

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

  • 用户单击链接，jQuery 通过检查它是否 hasClass('tab-url-call') 来获取事件
  • 临时保存 URL 属性
  • 循环遍历标签索引
    • 检查 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>

感谢您花时间阅读我的问题。

4

1 回答 1

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();
})
于 2013-10-08T03:28:44.873 回答