同じ外観を維持しながらulリストをタブに変換する

Question

私はjquery UIを使用して1ページのアプリケーションを作成しています。私はページのナビゲーションレイアウトを構築しました。最後は、ナビゲーションからタブに移動することでした。

ページの同じ外観を維持しながら、タブ付きレイアウトに移行するのが難しいです。

セットアップでJSFIDDLEを作成しました。適用されるいくつかのCSSのリセットは、（あなたがそれを無視することができます）があり、そしてJSの下で、私はちょうどタブの機能を使用しますが、私は、タブ機能をaddig前に設計された外観を保つことができる期待していた

//  $("#pagewraper").tabs(); 

があります。これはできますか？私自身のタブ付きの機能を書いたほうがいいですか？

Answer 1

カスタムタブスクリプトを作成できます。私はあなたのものを変更する方法は次のとおりです。

CSSにこれを追加します。

#container div { 
    display: none; 
    padding: 1em; 
} 

#container div.tab-content-visible { 
    display: block; 
} 

これは、タブのコンテンツを非表示にし、それらがページの境界に押し付けないように、彼らにいくつかのパディングを与えるだろう。いずれかのdivに "tab-content-visible"というクラスがあると、再び表示されます。

HTMLの2か所にわずかに変更されました。最初は次のとおりです。

<ul class="app-nav"> 
    <li><a href="#tabs-1" class="current-tab">Tab 1</a></li> 
    <li><a href="#tabs-2">Tab 2</a></li> 
    <li><a href="#tabs-3">Tab 3</a></li> 
    <li><a href="#tabs-4">Tab 4</a></li> 
</ul> 

クラスの現在のタブを最初のタブに追加します。これはすぐに理解できるでしょう。

<div id="container"> 
    <div id="tabs-1" class="tab-content-visible"> 
    <p>Tab one content</p> 
    </div> 
    <div id="tabs-2"> 
    <p>Tab two content</p> 
    </div> 
    <div id="tabs-3"> 
    <p>Tab three content</p> 
    </div> 
    <div id="tabs-4"> 
    <p>Tab four content</p> 
    </div> 
</div> 

最初のタブのデータにタブの内容を表示するクラスを追加します。これまでのHTMLやCSSの編集では、最初のタブを除いて、すべてのタブのタブデータが隠されていました。したがって、最初のタブが「デフォルト」タブになりました。

最後に、あなたのjavascriptに次の行を追加します。

$(".app-nav li").click(function(e) { 
    $(this).find("a").click(); 
}); 

$(".app-nav li a").click(function(e) { 
    $(".current-tab").removeClass("current-tab"); 
    $(".tab-content-visible").removeClass("tab-content-visible"); 

    $(this).closest("li").addClass("current-tab").removeClass("app-nav-selected"); 

    var selector = $(this).attr("href"); 
    $(selector).addClass("tab-content-visible"); 
    e.preventDefault(); 
}); 

ここでは、これがどのように動作するかです。 LIがクリックされると、その中のアンカータグが見つけられ、そのonclickハンドラがトリガされます。

タブのアンカータグがクリックされた場合、最初のものが最初に表示されます。現在のタブは無効になります。現在のタブから現在のタブクラスを削除し、可視のタブデータから可視クラスを削除します。次に、現在のタブクラスをこのアンカーのLI親に追加します（nearestは、セレクタに一致する最も近い祖先を見つける関数です）。そして、current-tabクラスを追加します。あなたのホバーハンドラのために、この時点で "app-nav-selected"も削除しなければならないことに注意してください。さもなければ、トグルが台無しになります。あなたのホバーハンドラを見直して、これがなぜそうであるかを確認してください。

最後に、アンカータグのhrefを使用して、表示させたいタブデータを見つけるためのセレクタを取得します。可視のクラス名を追加すると、完了です。 e.preventDefault（）の呼び出しを除いて、実際にユーザーをどこにでも持ち込まないようにします。また、ページがスクロールしないようにするため、タブが表示されなくなる可能性があります。ユーザーがスクロールアップできるので実装が中断されることはありませんが、確かにきれいに見えません。