0

とても簡単です。html ページ内に 2 つの nav タグが必要です。どちらも JqueryUI のタブ ウィジェットをサポートしています

これは、1 つのタブ付きナビゲーションを作成する方法です。

<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>

しかし、どうやってこの2つを手に入れるのですか？

<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>

これにより、最初の nav タグはタブ付きになり、2 番目の 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>

2番目のものには、html要素にこれらのクラスがありません。彼はタブとして働く必要があります。

4

1 に答える 1

1

タブ | を使用していると仮定します。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/

于 2013-10-29T21:59:10.837 に答える