http://oshiete1.goo.ne.jp/qa5275862.html
の質問に関連して、こちらももしどなた様かお教え頂けますなら、コメントを頂けますと大変嬉しいです。
宜しくお願い申し上げます。
↑ 引用の【別ページへのURL移動なく、タブを切り替えて各対応する div 内の表示を切り替えるUI】につき、
該当部分を簡単に引用すると、以下のような原始的な javascript で書いています。
--------------------------------------------
window.onload = function(){
createTab();
showCategory('menu1');
setTabClick('menu1Nav','menu1');
setTabClick('menu2Nav','menu2');
setTabClick('menu3Nav','menu3');
setTabClick('menu4Nav','menu4');
setTabClick('menu5Nav','menu5');
preloadImages( ~ );
};
function hide(elementId) {
document.getElementById(elementId).style.display = "none";
}
function show(elementId) {
document.getElementById(elementId).style.display = "block";
}
function showCategory(categoryName){
hide('menu1');
hide('menu2');
hide('menu3');
hide('menu4');
hide('menu5');
show(categoryName);
changeTab(categoryName);
}
function createTab() {
var tab_wrap = document.getElementById("tab_wrap");
var tab_conts = document.getElementById("tab_conts");
var nav = document.createElement("ul");
nav.setAttribute('id','nav');
nav.appendChild(createListItem('menu1Nav','#menu1','メニュー1'));
nav.appendChild(createListItem('menu2Nav','#menu2','メニュー2'));
nav.appendChild(createListItem('menu3Nav','#menu3','メニュー3'));
nav.appendChild(createListItem('menu4Nav','#menu4','メニュー4'));
nav.appendChild(createListItem('menu5Nav','#menu5','メニュー5'));
tab_wrap.insertBefore(nav,tab_conts);
}
function createListItem(id,href,text) {
var li = document.createElement("li");
var a = document.createElement("a");
var t = document.createTextNode(text);
li.setAttribute('id',id);
a.setAttribute('href',href);
a.appendChild(t);
li.appendChild(a);
return li;
}
function setTabClick(listName,categoryName) {
var e = document.getElementById(listName).getElementsByTagName('a')[0];
e.onclick = function(){
showCategory(categoryName);
return false;
};
e.onfocus=function(){this.blur();}
}
function changeTab(categoryName){
var e = document.getElementById('nav');
e.className = categoryName;
}
---------------------------------------------------------------
この最初の window.onload = function(){ ~ で
showCategory('menu1'); と、最初に表示されるタブ(& 該当 div)を固定で指定しているので、
特定タブに切り替えて、該当する内部の div 内のリンクなどから別ページに移動した後に【最初のタブのあるページ】に戻っても(history.back(); リンクからでもOK)、毎回「最初の menu1 のタブ & 該当 div」が表示されることになります。
この最初の window.onload を、この js 内に セット・ゲットcookie などを使って、現在の Yahoo JAPAN! のTOP上部タブのように、
【★ 別ページに移動した後に前ページへ戻ったら、最後に自分が見ていたタブが開いている状態で戻れる】
ようにできるとすれば、どのような記述をすれば良いでしょうか?
サーバーサイドスクリプトではなく、cookie 利用で js でできれば良いのですが。
javascript 不勉強者には cookie コントロールは難しいかもしれませんが、例示でなく【具体的な記述方法】でご教授頂けますと大変幸いです。
ぐぐって調べましたが、適当なサンプルがどうしても見つからず、
ご理解の深い皆様の教えを頂けますと大変ありがたく。
何卒宜しくお願い申し上げます。
No.3
- 回答日時:
すみません、使い方かいてませんでしたね。
関数名、プロパティ名そのままですが、
// 前準備として、有効期限をセットしてやります。Date 型をそのままセットできます。
var date = new Date;
date.setDate( date.getDate() + 1 ); // 有効期限 1 日なら
COOKIE.expires = date;
// そのとき限りで消えてしまってもかまわないようでしたら、セットしなくても大丈夫です。
# この実装いまいちかも。。。
// 保存したいときは、
COOKIE.set( 'shownID', 'menu1' ); など。
// 取り出したいときは
COOKIE.get( 'shownID' );
存在しないときは null が返ります。
データをまとめて消したいときは
COOKIE.data = {};
としてください。
# destroy 関数があってもよかったかもしれません。
// path, domain は必要に応じてセットしてください。わからなければ放置で大丈夫です。
この回答への補足
yuu_x 様、先日は誠にありがとうございました。
まだバタバタして記述を試せていないのですが、goo より【2週間経過の close催促】がありましたので、一旦本スレッドを閉じさせて頂きます(「またお尋ねすることがあるかもしれない」とも思っておりましたが)。
必要あれば、また別スレッドを立てさせて頂きます。
今回は、本当に誠にありがとうございました。
No.2ベストアンサー
- 回答日時:
====== cookie.js =================================================
var COOKIE = {
data : {},
expires : null,
path : null,
domain : null,
init : function( ) {
this.parse( );
window./*@if(1) attachEvent( 'on' + @else@*/ addEventListener( /*@end@*/ 'unload', this.regist, false );
},
regist : function( ) {
var cookie = [];
for( name in COOKIE.data ) {
COOKIE.data.hasOwnProperty( name ) && cookie.push( encodeURIComponent( name ) + '=' + encodeURIComponent( COOKIE.data[ name ] ) );
}
COOKIE.expires && cookie.push( 'expires=' + COOKIE.expires.toUTCString( ) );
COOKIE.path && cookie.push( 'path=' + encodeURIComponent( COOKIE.path ) );
COOKIE.domain && cookie.push( 'domain=' + encodeURIComponent( COOKIE.domain ) );
document.cookie = cookie.join( '; ' );
},
set : function( name, value ) {
this.data[ name ] = value;
},
get : function( name ) {
return this.data.hasOwnProperty( name ) ? this.data[ name ] : null;
},
parse : function( ) {
var cookie = document.cookie.split( /;\s*/ );
var parts, i;
for( i=0; i<cookie.length; i++ ) {
parts = cookie[ i ].split( '=' );
switch( parts[ 0 ] ) {
case 'expires' : this.expires = parts[ 1 ]; break;
case 'path' : this.path = parts[ 1 ]; break;
case 'domain' : this.domain = parts[ 1 ]; break;
default : this.data[ parts[ 0 ] ] = parts[ 1 ];
}
}
}
};
COOKIE.init( );
yuu_x 様、スクリプトを本当にありがとうございます。
心より感謝申し上げます。
少し別作業等落ち着いたら、ぜひ試させて頂きます。
メソッドのコールで分からない点がありましたら、
また書き込みをさせて頂きます。
そのような際は、もしそのときお時間可能でしたら、宜しくお願い申し上げます。
本当に、2度の書き込みに渡り、ありがとうございました。
No.1
- 回答日時:
unloadイベントでそのときのタブの番号をクッキーに保存。
onload時にクッキーのタブ番号を表示(なければデフォルト)。
で、よいのでは?
単純にクッキーへの保存、読出しができればよいだけでしょうから、調べれば解説サイトがいろいろとあると思いますが?
(文字数の都合を考えれば、ここでの回答よりも詳細な説明やサンプルも沢山あるはず)
http://www.google.com/search?q=javascript+cookie
この回答への補足
fujillin 様、コメントありがとうございます。
ご指摘のイベント時に記述を書くこと&ご意見全くごもっともです。本来検索して時間をかけ調べるべきところ、現在別の作業の納期等に追われ半死に状況です。
大変ムシの良い書き込みであることは重々承知しております。
もしお教え頂ける方がいらっしゃれば、
・目的達成に近いサンプルの解説ページURL or
・説明文抜きで勿論結構ですので、「関数定義」と「そのコール方法」の記述法
を教えて頂ければ、当方まさに「天の助け」の状況です。
御恩は忘れません。
「ふざけんじゃねえ」とご気分を害する場合は、どうかお許し&お流しください。
コメントありがとうございました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
<a>タグのテキストを取得
-
Click回数を数え、規定された回...
-
ActiveXobjectが作成できない
-
javascript の 命令文の記述で...
-
appendChildがieだとできない??
-
イベントに適切な値が伝わらない
-
addEventListenerで
-
任意の座標をクリックさせるには
-
DOMMouseScrollを使って特定のI...
-
javascriptでスロットゲームを...
-
javascript 特定のタグのidの存...
-
関数でy=g(x)のgとは何の略です...
-
同じIDで定義した要素の配列を...
-
ASP.NETのコントロールの値をJa...
-
ASP+アクセスでのSQLコメントに...
-
javascriptを用いて作成された...
-
C#OpenCv V4にのエラーに関する...
-
javascriptで文字挿入でtoggle...
-
jQueryの :not() .not() が有効...
-
【正規表現】【javascript】CR...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
ActiveXobjectが作成できない
-
<a>タグのテキストを取得
-
重複しないくじの作り方がわか...
-
任意の座標をクリックさせるには
-
javascriptでCSVを呼出しvlookup
-
innerHTML実行後のイベント
-
HTML:Tableタグに対し、JavaScr...
-
onchangeイベントを使ってspan...
-
WordPressのコンタクトフォーム...
-
appendChildがieだとできない??
-
配列の大括弧と丸括弧はどう違う?
-
JavaScriptでオブジェクトを取...
-
【Tabキー】特定の範囲内だけで...
-
div要素内の全input要素をdisable
-
問題はbind の付いたリスナーを...
-
モーダルダイアログウィンドウ...
-
テキストボックスがブランクの...
-
javascript 特定のタグのidの存...
-
日本語入力の禁止
-
javascriptで編集可能不可能の...
おすすめ情報