http://ri-mode.com/rainbow/2013/12/24/swap_contents_tab_jquery2/
JSで要素の表示の切り替えをした時にリロードしても状態を維持する - WebDelog
下記のように、Javascriptを使って要素の表示を切り替えて、 非遷移のページを作成する場合があると思います。 Demo 2011-08-07 1st - jsdo.it - share JavaScript, HTML5 and CSS これはCSSのプロパティDiplayをリンクをクリックした際に切り替えているだけですが、 ユーザにとっては画面の遷移が無いのでとても快適ですよね。 ただ、あくまでCSSを切り替えてDivを表示させているだけなので、 うっかり更新ボタンを押してしまったりすると、 初期の画面の状態に戻ってしまいます。 (上記の場合だと最初のリンクだけが表示されている状態) これによって普段と違う動作に利用者が混乱してしまうことがあるかもしれません。 今回はこれを解決します。 解決法 クリックしたときにURLにハッシュが付加されるようにaのhrefを以下のように編集します
jQueryを使ったタブメニューの実装サンプルまとめ
**追記** この記事とは直接関係ありませんが、自作のタブプラグインを貼っておきます。 rin316/jquery.tab: jQuery tab plugin. **追記終わり** 仕事でjQueryを使ったタブメニューを作ったので忘れないようにメモ。 それぞれの挙動も比較しやすいように並べてみました。 今日が勉強初投稿の日！ 写真:新川通りで撮った桜。 まずはファイルの用意 下記リンクからダウンロード。 ・jQuery本体…Past Releases内→最新バージョンのMinified ・Download Builder | jQuery UI (このサイトで使っているui.tabs.zip) head内にリンクを張る ダウンロードしたファイルに対して、head内にリンクを張ります。 [html] [/html] さっそく使ってみる 本文にhtmlを追加。 [html] タブ1 タブ2
jQueryでタブメニューを実装（画像メニュー版）
jQueryでタブメニューを実装（画像メニュー版） jQuery2010年8月12日 こちらの記事で、メニュー部分をテキストにて実装するjQueryのスクリプトを紹介させて頂きました。 私も業務でタブメニューを実装する場合はjQueryを使用することが多いのですが、テキストではなくなにかと画像で実装するパターンのほうが多かったりします。実はその場合のスクリプトはまったく違ったものになるので、こちらの記事ではメニューを画像で実装した場合のスクリプトをご紹介します。 jQueryはこちらからダウンロード 実際のサンプル HTML <div id="tab-box"> <ul id="nav" class="clearFix"> <li><a href="#tab-01"><img src="img/nav-01.gif" alt="" width="80" height="30"/></a><
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
