Q&A
jQueryなのにjavaってことはなさそうなのでjavascriptにタグを切り替えたほうがよさそう
前提・実現したいこと
通常のタブ切り替え機能で以下 ①②両方の機能をもっているようにしたい
①クッキーを利用してタブの位置を、次回アクセス時に再現させる
②パラメーターを利用して、指定のタブを開くことも出来る
＜条件＞
・パラメーターとクッキーの値が両方存在する場合は、パラメーター優先
例）index.html?bra=bbb、クッキーあり（タブCCC開いた値）→ タブBBBが開く
その他例）
index.html?bra=aaa→タブAAAが開く
index.html?bra=bbb→タブBBBが開く
index.html?bra=ccc→タブCCCが開く
index.html、クッキーなし →タブAAAが開く
index.html、クッキー（BBB開いた値）あり →タブBBBが開く
発生している問題・エラーメッセージ
①は実装できていて、①をベースに②の機能を追加したいと考えています。
下記記事を参考にしましたが、どう合体させて良いかわかりません。
https://irohacross.net/2016/04/jquery_tabpram.html
もし、現状①ベースから、②の機能追加は難しい場合は
ゼロベースから考えようと思います。
その場合、なにか参考記事があれば教えていただきたいです。
①だけのソースコード
<!doctype html> <html> <head> <script src="jquery.js" type="text/javascript"></script> <link href="css/common_sp.css" type="text/css" rel="stylesheet"> <script src="jquery.cookie.js" type="text/javascript"></script> <script> jQuery(function(){ var index = 0; var Tabs = jQuery("#tabnavi li a"); var TabActive = "active"; var TabContents = jQuery("div#tabcontent"); jQuery('#tabcontent > div').hide(); jQuery(Tabs).click(function(e){ e.preventDefault(); jQuery('#tabcontent > div').hide().filter(this.hash).fadeIn(); jQuery(jQuery(this).attr("href")).fadeIn(300); jQuery(Tabs).removeClass(TabActive); jQuery(this).addClass(TabActive); jQuery.cookie("contents", jQuery(this).attr("href") , {expires: 7}); jQuery('img.lazyload_:visible').trigger('appear'); }); // クッキー読み込み var CookieName = jQuery.cookie("contents"); if (CookieName != null) { jQuery(Tabs).removeClass(TabActive); jQuery("a[href="+CookieName+"]").addClass(TabActive); jQuery(CookieName).fadeIn(300); } else { jQuery(Tabs).eq(index).addClass(TabActive); jQuery(TabContents).show(); jQuery("div:first" , TabContents).show(); } }); </script> </head> <body> <div id="tabnavi"> <ul> <li><a href="#extab01">AAA</a></li> <li><a href="#extab02">BBB</a></li> <li><a href="#extab03">CCC</a></li> </ul> </div> <div id="tabcontent"> <div id="extab01">AAA</div> <div id="extab02">BBB</div> <div id="extab03">CCC</div> </div> </body> </html>
これをベースに
②パラメーターを利用して、指定のタブを開く
の機能も追加したいと思っています。
試したこと
https://irohacross.net/2016/04/jquery_tabpram.html
以下参考記事から抜いてきて
クラス名とか変えてみたのですが・・
jQuery(function() { // URLを取得 var url = location.href; //URLチェック。パラメータが「?no=tab?」以外の場合はデータを渡さない url = (url.match(/?no=tab\d+jQuery/) || [])[0]; //取得したURLを「?」で分割。変数paramsに格納 var params = url.split("?"); //さらにparams内、0から数えて1番目のデータを「=」で分割。変数tabに格納 var tab = params[1].split("="); //tabに要素が存在するなら、変数tab内0から数えて1番目のデータを変数tabnameに格納 if(jQuery(tab).length){ var tabname = tab[1]; } else{ // 要素が存在しなければtabnameにtab1を代入する var tabname = "tab01"; } //コンテンツを一度すべて非表示にし、 jQuery('#tabcontent').css('display','none'); //一度タブについているクラスselectを消し、 jQuery('#tabnavi li').removeClass('display'); var tabno = jQuery('#tabnavi li#' + tabname).index(); //クリックされたタブと同じ順番のコンテンツを表示します。 jQuery('#tabcontent').eq(tabno).fadeIn(); //クリックされたタブのみにクラスselectをつけます。 jQuery('#tabnavi li').eq(tabno).css('display','block'); });
補足情報（FW/ツールのバージョンなど）
jQuery v2.1.1
スマホサイト・PCサイト両方で実装したい
回答2件
0
自己解決
いろいろ調べ、下記で実装することができました。
まだまだ勉強不足です・・
jQuery(function(){ var index = 0; var Tabs = jQuery("#tabnavi li a"); var TabActive = "active"; var TabContents = jQuery("div#tabcontent"); jQuery('#tabcontent > div').hide(); var url = location.href;//URLを取得 var params = url.split("?");//URLを「?」で分割 if(typeof params[1] != "undefined"){//パラメータが存在しない場合以下の処理を行わない var paramms = params[1].split("&");//「?」で分割したものをさらに「&」で分割 var paramArray = [];//パラメータ格納用配列 // 配列にパラメータを格納 for ( i = 0; i < paramms.length; i++ ) { work = paramms[i].split("=");//パラメータを○○○=×××で分割 paramArray.push(work[0]);//配列に○○○を格納 paramArray[work[0]] = work[1];//格納した○○○に×××を代入 } } if(typeof paramArray != "undefined"){//何かしらパラメータが存在するかチェック if (typeof paramArray["target-tab"] != "undefined") {//パラメータtarget-tabが存在する場合 var selectedTab = "#" + paramArray["target-tab"];//パラメータで指定されたタブを選択。先頭に「#」を追加 } } if(!$(selectedTab).length){//パラメータでタブが指定されていない場合 var CookieName = jQuery.cookie("contents");// クッキー読み込み var selectedTab = CookieName;//取得したCookieからタブを選択 } if (typeof selectedTab != "undefined") { jQuery(Tabs).removeClass(TabActive); jQuery("a[href="+selectedTab+"]").addClass(TabActive); jQuery(selectedTab).fadeIn(300); } else { jQuery(Tabs).eq(index).addClass(TabActive); jQuery(TabContents).show(); jQuery("div:first" , TabContents).show(); } //---------------------------------- //============================================================================== //Tabクリック処理 jQuery(Tabs).click(function(e){ e.preventDefault(); jQuery('#tabcontent > div').hide().filter(this.hash).fadeIn(); jQuery(jQuery(this).attr("href")).fadeIn(300); jQuery(Tabs).removeClass(TabActive); jQuery(this).addClass(TabActive); jQuery.cookie("contents", jQuery(this).attr("href") , {expires: 7}); jQuery('img.lazyload_:visible').trigger('appear'); }); }); </script>
投稿2019/07/24 02:13
総合スコア11
0
クッキーへの設定はいつ行うのでしょうか？
javascript
1<style> 2#tabnavi li.active{background-Color:red} 3</style> 4<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 5<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script> 6<script> 7$(function(){ 8 $(window).on('pageshow',function(){ 9 var bra=location.search.match(/(?:?|&)bra=(.+?)(?=&|$)/); 10 bra=bra?bra[1]:"aaa"; 11 $('#tabnavi li').removeClass('active').filter("."+bra).addClass('active'); 12 $('#tabcontent .content').hide().filter("."+bra).show(); 13 }); 14}); 15</script> 16<div id="tabnavi"> 17<ul> 18<li class="aaa"><a href="?bra=aaa">AAA</a></li> 19<li class="bbb"><a href="?bra=bbb">BBB</a></li> 20<li class="ccc"><a href="?bra=ccc">CCC</a></li> 21</ul> 22</div> 23 24<div id="tabcontent"> 25<div class="content aaa">AAA</div> 26<div class="content bbb">BBB</div> 27<div class="content ccc">CCC</div> 28</div>
投稿2019/07/16 07:39
総合スコア114806
とてもシンプルなコードでご回答いただきましてありがとうございます！
②のパラメーターでタブ切り替えできることを確認できました！ありがとうございます。
ただひとつ私の質問内容に不備があり申し訳ないのですが
ほしい機能として質問内容に
---------------------------------------------------------------
タブ切り替え表示で以下 ①②両方の機能をもっているようにしたい
①クッキーを利用してタブの位置を、次回アクセス時に再現させる
②パラメーターを利用して、指定のタブを開く
---------------------------------------------------------------
と書かせていただきましたが、②に追記して、
パラメーターを指定しなくても 通常のタブを切り替えは残したいと思っています。
いただいたコードの動きを確認してみたのですが、通常のタブ切り替えができませんでした。
＞＞ クッキーへの設定はいつ行うのでしょうか？
下記で設定しようと思っているのですが、
①②のコードをまとめて書く方法がわからないので、別々で記述しようと思っております。
（その方法が出来るのかは。。。知識不足でわからないのですが・・・）
// クッキー読み込み
var CookieName = jQuery.cookie("contents");
if (CookieName != null) {
jQuery(Tabs).removeClass(TabActive);
jQuery("a[href="+CookieName+"]").addClass(TabActive);
jQuery(CookieName).fadeIn(300);
} else {
jQuery(Tabs).eq(index).addClass(TabActive);
jQuery(TabContents).show();
jQuery("div:first" , TabContents).show();
}
あなたの回答
tips
プレビュー
