Question

这很简单，我希望在我的html页面中有2个导航标签。两者都支持JqueryUI中的tabs-widget

这是如何创建一个选项卡式导航：

<nav id="tabs">
                <ul id="menu">
                    <li id="menu_about"><a href="#aboutme">All About Me</a></li>
                    <li id="menu_portfolio"><a href="#portfolio">Portfolio</a></li>
                    <li id="menu_work_experience"><a href="#work">Werkervaring</a></li>
                    <li id="menu_skills"><a href="#skills">Skills</a></li>
                </ul>
 <div id="#aboutme">content bla bla bla </div>
</nav>

但如何做到这两个？

<nav id="tabs">
                <ul id="menu">
                    <li id="menu_about"><a href="#aboutme">All About Me</a></li>
                    <li id="menu_portfolio"><a href="#portfolio">Portfolio</a></li>
                    <li id="menu_work_experience"><a href="#work">Werkervaring</a></li>
                    <li id="menu_skills"><a href="#skills">Skills</a></li>
                </ul>
 <div id="#aboutme">content bla bla bla </div>
</nav>
<nav id="tabs2">
                <ul id="menu">
                    <li id="menu_about"><a href="#aboutme">All About Me</a></li>
                    <li id="menu_portfolio"><a href="#portfolio">Portfolio</a></li>
                    <li id="menu_work_experience"><a href="#work">Werkervaring</a></li>
                    <li id="menu_skills"><a href="#skills">Skills</a></li>
                </ul>
 <div id="#aboutme">content bla bla bla </div>
</nav>

因为这导致第一个导航标签被标签化，第二个导航标签不被标签化。

我也尝试将tabs2更改为标签。但这并没有像预期的那样发挥作用。

请帮帮我！

修改

目前我没有写任何javascript。这是因为我可以看到哪一个是标签式的，哪些不是。

标签的内容让我在浏览器中显示源代码：

<nav id="tabs" class="ui-tabs ui-widget ui-widget-content ui-corner-all">
                <ul id="menu" class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all" role="tablist">
                    <li id="menu_about" class="ui-state-default ui-corner-top ui-tabs-active ui-state-active" role="tab" tabindex="0" aria-controls="aboutme" aria-labelledby="ui-id-1" aria-selected="true"><a href="#aboutme" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-1">All About Me</a></li>
                    <li id="menu_portfolio" class="ui-state-default ui-corner-top" role="tab" tabindex="-1" aria-controls="portfolio" aria-labelledby="ui-id-2" aria-selected="false"><a href="#portfolio" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-2">Portfolio</a></li>
                    <li id="menu_work_experience" class="ui-state-default ui-corner-top" role="tab" tabindex="-1" aria-controls="work" aria-labelledby="ui-id-3" aria-selected="false"><a href="#work" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-3">Werkervaring</a></li>
                    <li id="menu_skills" class="ui-state-default ui-corner-top" role="tab" tabindex="-1" aria-controls="skills" aria-labelledby="ui-id-4" aria-selected="false"><a href="#skills" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-4">Skills</a></li>
                </ul>
</nav>

第二个在html元素中没有这些类。他确实需要以标签的形式工作。

Answer 1

假设您正在使用Tabs | jQuery UI

JS

  $(function() {
    $( "#tabs, #tabs2" ).tabs();
  });

HTML

 <nav  id="tabs">
  <ul>
    <li><a href="#tabs-1">All About Me</a></li>
    <li><a href="#tabs-2">Portfolio</a></li>
    <li><a href="#tabs-3">Skills</a></li>
  </ul>
  <div id="tabs-1">
    <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus.</p>
  </div>
  <div id="tabs-2">
    <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. </p>
  </div>
  <div id="tabs-3">
    <p>Mauris eleifend est et turpis.</p>
    <p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus.</p>
  </div>
</nav >



<nav  id="tabs2">
  <ul>
    <li><a href="#tabs-1">All About M 2</a></li>
    <li><a href="#tabs-2">Portfolio 2</a></li>
    <li><a href="#tabs-3">Skills 2</a></li>
  </ul>
  <div id="tabs-1">
    <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus.</p>
  </div>
  <div id="tabs-2">
    <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. </p>
  </div>
  <div id="tabs-3">
    <p>Mauris eleifend est et turpis.</p>
    <p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus.</p>
  </div>
</nav >

来自jsFiddle的示例：http://jsfiddle.net/KrtXt/2/

2导航标签栏jquery UI

1 个答案:

JS

HTML