单击主导航转到选项卡内容

时间：2013-12-13 14:10:01

标签： jquery html

我不知道这是否可以用html完成，但这就是我想要做的。

我使用基金会 tab ，我想通过点击上面的链接导航到任何标签的内容主导航。导航中这些子菜单的内容都在同一页面上。如果您不理解，请告诉我，以便我可以上传图片或其他内容。这是link to it。

3 个答案:

答案 0 :(得分：1)

从选项卡中删除活动类

$("#tab1").removeClass("active");

将课程添加到新标签页

$("#tab2").addClass("active");

隐藏第一个面板

$("#panel1").hide();

显示新面板

$("#panel2").show();

答案 1 :(得分：1)

编辑1 ：我有时间研究基金会的工作方式。所以我可以提出一个更有教养的解决方案。我最初的想法是模仿点击css级别的项目的效果。

这并不意味着旧的解决方案不起作用。实际上两种解决方案的最终结果相同。我已经在您网站的HTML副本上测试了旧解决方案和新解决方案。

还借此机会补充一些说明。

编辑2 ：我已经添加了对更为明显的历史记录的控制权。这意味着代码将更改用户看到的URL并正确处理后退按钮，无需重新加载页面。

路线图

你必须这样做：

  1. 添加ID以处理标签。
  2. 创建JavaScript函数selectTab以在它们之间切换。 取决于您选择的解决方案。
  3. 创建一个JavaScript函数navigateTab，它将调用selectTab，但也会更新浏览器历史记录。
  4. 添加点击事件处理程序。
  5. 处理后退按钮。

    6. 所以，让我们首先得到共同的部分：

    添加ID以处理选项卡

    HTML：

    <dl id="LOOK_MY_ID" class="tabs" data-tab>
    <dd class="active"><a href="#panel2-1">Tab 1</a></dd>
    <dd><a href="#panel2-2">Tab 2</a></dd>
    <dd><a href="#panel2-3">Tab 3</a></dd>
    <dd><a href="#panel2-4">Tab 4</a></dd>
</dl>
<div class="tabs-content">
    <div class="content active" id="panel2-1">
        <p>First panel content goes here...</p>
    </div>
    <div class="content" id="panel2-2">
        <p>Second panel content goes here...</p>
    </div>
    <div class="content" id="panel2-3">
        <p>Third panel content goes here...</p>
    </div>
    <div class="content" id="panel2-4">
        <p>Fourth panel content goes here...</p>
    </div>
</div>

    注意：这是基于Example of Foundation Tabs中提供的HTML。在您的代码中，您可以将id添加到具有类corporation-frame的div中。

    创建辅助函数

    辅助函数的目的是使抽象代码更改浏览器URL时使click事件处理程序更容易。如下所示，我们得到了这个。

    JavaScript的：

    function navigateTab(event)
{
    var url = $(event.target).attr('href');
    var target = url.split('#')[1];
    if (target.substr(0, 3) == 'tab')
    {
        var state = {tab: target.substr(3)};
        selectTab("LOOK_MY_ID", state.tab); //<-- change the tab
        history.pushState(state, null, url); //<-- change the url
        event.preventDefault();
    }
}

    正如您所看到它使用event，其背后的原因是我们将直接将此函数用作单击事件处理程序。此外，要选择的选项卡和要放置的网址取自已单击的超链接的href属性。

    此技术还允许安全地将click事件处理程序一次性添加到所有链接。

    注意：我们正在使用HTML5's History API更改网址。

    添加事件处理程序

    你需要为你的链接添加一个事件处理程序（Foundation将这些添加到幕后的标签中，我们将模仿你的菜单）。

    有两种方法可以添加这些事件处理程序...

    方法A）

    选择您的锚点并通过JavaScript添加事件处理程序：

    $('ul.dropdown a').on("click", navigateTab);

    它没有比这简单。

    注意：确保使用正确的选择器从菜单中选择超链接。另外，您可能需要（如果您在页面顶部添加脚本），请使用ready添加此脚本：

    $(document).ready(
    function()
    {
        $('ul.dropdown a').on("click", navigateTab);
    }
);

    方法B）

    直接在HTML上添加事件处理程序：

    HTML：

    <a href="#tab3" onclick="navigateTab(event)">Tab 3</a>

    注1 ：如果在处理程序上禁用JavaScript不起作用，它将使页面跳转到内容（如果它们可见）。这是没有JavaScript的最佳选择。

    处理后退按钮

    在上面的代码中，我们不仅更改了浏览器中的url，而且还在页面的导航历史记录中添加了一个条目......那么，当用户单击后会发生什么？好吧，我们将再次使用HTML5's History API来处理后退按钮。

    要处理我们要添加此代码：

    window.onpopstate = function(event)
{
    selectTab("LOOK_MY_ID", event.state.tab); //<-- change the tab
};

    这就是为什么我们不应该更改selectTab的网址，因为如果我们这样做...我们将无法导航回来！

    note ：此代码不仅会处理后退按钮，还会处理页面内浏览器历史记录中的任何导航。

    新解决方案

    创建JavaScript函数以在它们之间切换

    函数selectTab将通过以下方式实现：

    1. 模仿基金会做什么（基于基金会的实际代码）：

      2. JavaScript的：

      function selectTab(id, tab)
{
    // activate only the right tab:
    var tab = $("#" + id + " > dl > dd:nth-child(" + tab + ")");
    var a = $("a", tab);
    target = $('#' + a.attr("href").split('#')[1]);
    siblings = tab.siblings();
    settings = tab.closest('[data-tab]').data('tab-init');

    tab.addClass(settings.active_class);
    siblings.removeClass(settings.active_class);
    target.siblings().removeClass(settings.active_class).end().addClass(settings.active_class);
}

      旧解决方案

      创建JavaScript函数以在它们之间切换

      函数selectTab将通过以下方式实现：

      1. 制作要激活的标签
      2. 激活相应的内容
      3. 使所有其他标签无效
      4. 使所有其他内容无效

        5. JavaScript的：

        function selectTab(id, tab)
{
    // activate only the right tab:
    $("#" + id + " > dl").children().each
    (
        function(index, element)
        {
            if (index == tab)
            {
                $(element).addClass("active");
            }
            else
            {
                $(element).removeClass("active");
            }
        }
    );
    // activate only the right content:
    $("#" + id + " > div").children().each
    (
        function(index, element)
        {
            if (index == tab)
            {
                $(element).addClass("active");
            }
            else
            {
                $(element).removeClass("active");
            }
        }
    );
}

答案 2 :(得分：0)

您可以随时在导航栏上使用点击功能将所需标签的类别设置为“有效”

$("navelement").on("click", function(){
    $("#tab_id").addClass("active");
}
相关问题
最新问题