0

这很简单，我想在我的 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 更改为 tabs。但这并没有起到作用。

请帮帮我！

编辑

目前我没有编写任何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 元素中没有这些类。他确实需要作为标签工作。

4

1 回答 1

1

假设您正在使用 Tabs | jQuery 用户界面

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/

于 2013-10-29T21:59:10.837 回答