パラメータなしで閲覧した際に発生するsplitのエラーを回避させたいです。
http://irohacross.net/2016/04/jquery_tabpram.html
こちらのサイトを参考に、タブの切り替え&指定タブへのダイレクトリンクを実装しました。
以下JSで問題なく動くのですが、
パラメータなしで閲覧した場合、Chromeのデベロッパーツールで見ると、
【Uncaught TypeError: Cannot read property 'split' of undefined】
が表示されています。
これをJSで回避させたいのですが、記述がわかりませんでした。
どなたかお教えいただけないでしょうか。
・hoge.htmlとtab.htmlを表示した際に、splitエラーが出る
・hoge.html?no=tab1など、?no=tabがついた場合はエラーが出ない
hoge.html
<ul class="tab_area"> <li id="tab1" class="select">タブ1</a></li> <li id="tab2">タブ2</a></li> </ul> <div class="content_area"> hoge.htmlのタブ1の中身 <a href="tab.html?no=tab1">tab.htmlのタブ1へのリンク</a> </div> <div class="content_area hide"> hoge.htmlのタブ2の中身 <a href="tab.html?no=tab2">tab.htmlのタブ2へのリンク</a> </div>
tab.html
<ul class="tab_area"> <li id="tab1" class="select">タブ1</a></li> <li id="tab2">タブ2</a></li> </ul> <div class="content_area"> tab.htmlのタブ1の中身 <a href="hoge.html?no=tab1">hoge.htmlのタブ1へのリンク</a> </div> <div class="content_area hide"> tab.htmlのタブ2の中身 <a href="hoge.html?no=tab2">hoge.htmlのタブ2へのリンク</a> </div>
Javascript
$(function() { $('ul.tab_area li').click(function() { var index = $('ul.tab_area li').index(this); $('.content_area').css('display','none'); $('.content_area').eq(index).show(); $('.tab_area li').removeClass('select'); $(this).addClass('select'); }); var url = location.href; url = (url.match(/\?no=tab\d+$/) || [])[0]; var params = url.split("?"); //ここがエラーになる var tab = params[1].split("="); if($(tab).length){ var tabname = tab[1]; } else { var tabname = "tab2"; } $('.content_area').css('display','none'); $('.tab_area li').removeClass('select'); var tabno = $('ul.tab_area li#' + tabname).index(); $('.content_area').eq(tabno).show(); $('ul.tab_area li').eq(tabno).addClass('select'); });
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/06/02 12:47
2016/06/02 13:00
2016/06/03 00:38
2016/06/03 09:18
2016/06/03 10:23