Latest web development tutorials

財団タブ

あなたはコンテンツページの多くを持っている場合は、ページング機能を使用する必要があります。

基本的なページング機能を作成するには必要です<ul>要素を加えた上.paginationカテゴリ:

<ULクラス = "ページネーション">
<李> <aのHREF = "#"> 1 </ A> </ LI>
<李> <aのHREF = "#"> 2 </ A> </ LI>
<李> <aのHREF = "#"> 3 </ A> </ LI>
<李> <aのHREF = "#"> 4 </ A> </ LI>
<李> <aのHREF = "#"> 5 </ A> </ LI>
</ UL>

»をお試しください

現在ページ

あなたがすることができます<li>追加.current現在のページをマークするクラス:

<ULクラス = "ページネーション">
<李クラス= "現在"> <aのHREF = "#"> 1 </ A> </ LI>
<李> <aのHREF = "#"> 2 </ A> </ LI>
<李> <aのHREF = "#"> 3 </ A> </ LI>
<李> <aのHREF = "#"> 4 </ A> </ LI>
<李> <aのHREF = "#"> 5 </ A> </ LI>
</ UL>

»をお試しください

タブを無効にします

あなたは、タブを設定する必要がある場合は、クリックできない必要.unavailable種類:

<ULクラス = "ページネーション">
<李> <aのHREF = "#"> 1 </ A> </ LI>
<李> <aのHREF = "#"> 2 </ A> </ LI>
<李クラス= "使用不能"> <aのHREF = "#"> 3 </ A> </ LI>
<李> <aのHREF = "#"> 4 </ A> </ LI>
<李> <aのHREF = "#"> 5 </ A> </ LI>
</ UL>

»をお試しください

ページング方向

最初と最後のコード> <LI>要素の追加で.arrowクラス挿入HTMLエンティティ記号&laquo;し、 &raquo;ページング方向のシンボルを作成するには:

<ULクラス = "ページネーション">
<李クラス= "矢印"> <aのhref = "#">&LAQUO; </ A> </ LI>
<李> <aのHREF = "#"> 1 </ A> </ LI>
<李> <aのHREF = "#"> 2 </ A> </ LI>
<李> <aのHREF = "#"> 3 </ A> </ LI>
<李> <aのHREF = "#"> 4 </ A> </ LI>
<李> <aのHREF = "#"> 5 </ A> </ LI>
<李クラス= "矢印"> <aのhref = "#">表示&raquo; </ A> </ LI>
</ UL>
»をお試しください

ページング中心

我々は、追加することができます。<UL>外側<div>要素と<div>に追加.pagination-centeredページング中心を実装するクラス:

<DIVクラス= "ページネーションを中心としました ">
<ULクラス = "ページネーション">
<李クラス= "矢印"> <aのhref = "#">&LAQUO; </ A> </ LI>
<李クラス= "現在"> <aのHREF = "#"> 1 </ A> </ LI>
<李> <aのHREF = "#"> 2 </ A> </ LI>
<李> <aのHREF = "#"> 3 </ A> </ LI>
<李> <aのHREF = "#"> 4 </ A> </ LI>
<李> <aのHREF = "#"> 5 </ A> </ LI>
<李クラス= "矢印"> <aのhref = "#">表示&raquo; </ A> </ LI>
</ UL>
</ DIV>

»をお試しください

パン粉

ブレッドクラムナビゲーション構造は、現在のページを表示するために使用されます。

では<ul>要素に追加された.breadcrumbsパンくずリストを実装するクラスを。 あなたは上の<LI>を追加することができます.currentまたは.unavailable現在のページを設定し、クラスではなく、クリック可能な効果:

<ULクラス = "ブレッドクラム">
<李> <aのHREF = "#">ホーム</ A> </ LI>
<李> <aのHREF = "#">プライベート</ A> </ LI>
<李クラス= "使用不能"> <aのHREF = "#">写真</ A> </ LI>
<李クラス= "現在">休暇ます。</ li>
</ UL>

»をお試しください

サブナビゲーション

ページの切り替え、サブナビゲーションは非常に便利です。

では<dl>要素が追加されます.sub-navサブナビゲーションを作成するクラスを。 では<dt>要素には、選択したオプションのタイトルを追加するには<dd>追加.active種類:

<ULクラス= "サブNAV ">
<Dtの>フィルタ:</ DT >
<DDクラス= "アクティブ"> <aのhref = "#">すべての</ A> </ DD>
<DD> <aのhref = "#">アクティブ</ A> </ DD>
<DD> <aのhref = "#">保留中</ A> </ DD>
<DD> <aのhref = "#">中断</ A> </ DD>
</ UL>

»をお試しください