知的?自己流?普利伊待夢な育児ブログ

主に子育て日記。パソコン関連はソフト紹介や備忘録。
美容/健康・ベビー/マタニティに関する商品も紹介中。

cssc cssc cssc
--/--/--  Post at Diskenth
Category スポンサー広告 Tags

MicroAd(マイクロアド)に登録して自分のWeb/Blogに広告を貼るだけでお小遣いが稼げます。 ↓から登録いただければ、報酬アップに必要なサイトランクアップ方法などノウハウを提供します。楽天ぴたっとアドも稼げるのでオススメです。
MicroAd(マイクロアド)の登録はコチラ  楽天ぴたっとアドの登録はコチラ



上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
2009/05/19  Post at Diskenth
Category JavaScript Tags Tips Ajax カスタマイズ コンテンツ

MicroAd(マイクロアド)に登録して自分のWeb/Blogに広告を貼るだけでお小遣いが稼げます。 ↓から登録いただければ、報酬アップに必要なサイトランクアップ方法などノウハウを提供します。楽天ぴたっとアドも稼げるのでオススメです。
MicroAd(マイクロアド)の登録はコチラ  楽天ぴたっとアドの登録はコチラ



タブをクリックすることで、記事を動的に変化させるJavascript/cssの作り方の紹介です。これを使うことで、記事スペースもスッキリしつつ内容を充実させられるし、ユーザビリティもサイトデザインも向上するのではないかと思います^^b

サンプルは以下サイトにて見ることができます。
●TabContent:sample

実装する手順などは続きに掲載しました。


↓以下、追記です↓

セットアップ手順
1. Downloadページにアクセス
2. 以下js/cssの計2ファイルをダウンロード
  ・tab.js
  ・tab.css
3. html(head内)に以下を記述
<link rel="stylesheet" type="text/css" href="★/tab.css" />
<script type="text/javascript" src="★/tab.js"></script>
★:アップロード後の各環境下のURLに
利用方法
1. 該当の本文に以下スクリプトを記述
<script type="text/javascript">
var countries=new ddtabcontent("countrytabs")
countries.setpersist(true)
countries.setselectedClassTarget("link") //"link" or "linkparent"
countries.init()
</script>

2. 該当の本文に以下を記述
<ul id="countrytabs" class="shadetabs">
<li><a href="#" rel="○1" class="selected">☆</a></li>
<li><a href="#" rel="○2">☆</a></li>
<li><a href="#" rel="○3">☆</a></li>
<li><a href="#" rel="○4">☆</a></li>
</ul>

<div style="border:1px solid gray; width:400px; margin-bottom: 1em; padding: 10px">
<div id="○1" class="tabcontent">★</div>
<div id="○2" class="tabcontent">★</div>
<div id="○3" class="tabcontent">★</div>
<div id="○4" class="tabcontent">★</div>
</div>
★:各タブ内の記事なので、好きな入力を
☆:各タブに入る名称なので、好きな入力を
○:rel/div id部分両方、それぞれ紐づくように一致させてください

オプション
最後に以下を入れると、サンプルのようにタブ切り替え(prev/next)ができます。
<p><a href="javascript:countries.cycleit('prev')" style="margin-right: 25px; text-decoration:none">Prev</a><a href="javascript:countries.cycleit('next')" style="margin-left: 25px; text-decoration:none">Next</a></p>
スポンサーサイト

コメント


この記事に対するコメントの投稿
















この記事に対するトラックバック

トラックバックURL
http://nakano66.blog66.fc2.com/tb.php/61-27bfa23d
この記事にトラックバックする(FC2ブログユーザー)
Profile

Diskenth

Author:Diskenth

はじめまして。Diskenthです。
30代のしがないリーマンですw
詳しくは ... 自己紹介 »

Archives
Categorise
Comments

Trackbacks
Links

MyBlog Links

Friend Links

Favorite Links

AffiFrend Links

Software | Material Links

Tips | Customize Links

Affiliate Links

Access Up Links

このブログをリンクに追加する

Ad Rakuten

Ad Micro

マイクロアドBTパートナーでおこづかいゲット!

Ad Sense

Ad Trend Match

Ad Adgger

アフィリエイト

ウェルカムボード

大阪 出張マッサージ 鍼灸 神戸 心理カウンセラー 福岡 Gree 広告 DM 制作 ダイレクトメール 代行 ダイレクトメール 発送代行 ショッピング枠現金化 リサイクルショップ 大阪

AccessUp Parts

キーワードアドバイス
ツールプラス

PING送信プラスSEO対策

RSS | Parts

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。