2009-08-08 5 views
0

jqueryタブ用の背景やその他の追加の書式設定が可能ですか?私が見てきたすべての例は、これだけのようなシンプルな白いタブが表示されます。jqueryタブをフォーマットすることができます

http://yensdesign.com/tutorials/tabs/

を私はjqueryのタブで(このページhttp://www.salemgolfclub.org/の)現在のjpg画像マップを置き換えることができるかどうかを確認しようとしています:

答えて

1

各タブは単純にHTML li要素なので、スタイルシートのプロパティを変更して見た目を変えられるようにする必要があります。

<ul class="menu"> 
    <li id="news" class="">News</li> 
    <li id="tutorials" class="">Tutorials</li> 
    <li id="links" class="active">Links</li> 
</ul> 

タブの外観は、CSSで排他的に制御されています。ここでは

は、タブに関連するHTMLです。 li要素が "active"のクラスで、いずれのul要素にも "menu"のクラスが含まれていると、特定の外観が得られます。同様に、クラス名のないliの要素のスタイルは異なっています。

li要素をクリックすると、ページの隠したdiv要素がタブの下の領域に表示されます。これは、jQueryのタブ拡張で制御され、メニューののすべてのli要素にクリックイベントが追加されます。このタブの拡張機能をそのまま使用するには、読み込んだときに既にページにある1つのタブに対応する1つのdiv要素を持つ必要があります。

これは、既にページにあるすべてのページ(ホーム、コースバイオ、プロショップ、スコアカード、外出&イベント、メンバー、指示、お問い合わせ)のすべてのコンテンツを必要とすることを意味します。あなたはこのタブのアイデアを成形しようとしているページ数を考慮して、非常にお勧めします。代わりに、タブがクリックされたときにページがロードされるようにタブ拡張を変更します。プリロードされたページ要素ではありません。

+0

フィードバックに感謝します。ページがタブをクリックしたときにロードする提案や例。 。 – leora

0

これは簡単に実行できます。最も速い方法は、関連するCSSの行をデフォルトのスタイルシートから取り出して、必要に応じて変更することです。あなたはゼロからでもそれを行うことができますが、タブを正しく動作させるためには多くのCSSの書式設定が必要です。

関連する問題