思いついたのでバージョンアップさせた。
過去記事
見返すと顔が熱くなる。
恥ずかしくなるってことは成長したってことで喜ばしいことである。
もうちょっとスマートにできるようになったので、それを書く。
内訳
- index.html：リンク元
- tab.html：リンク先・タブコンテンツ
- style.css：装飾
- scripts.js：ギミック管理
- アクセス時のURLから特定のパラメータを拾ったら発火させる
- サイト内のトリガーを叩いたら発火させる
やろうとしていることは以前のものと同じ。
jsはjQuery3でやる。
こんなかんじになる。
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="scripts.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="wrap">
<nav>
<ul>
<li><a href="tab.html?tab=tab01">tab01を表示した状態で開く</a></li>
<li><a href="tab.html?tab=tab02">tab02を表示した状態で開く</a></li>
<li><a href="tab.html?tab=ffff=eeee&tab03">tab03を表示した状態で開く</a></li>
<li><a href="tab.html?tab=tab04&sss=nnnn">tab04を表示した状態で開く</a></li>
</ul>
</nav>
</div>
</body>
</html>tab.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="scripts.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="wrap">
<nav>
<ul>
<li><span id="nav_tab01">tab01を表示</span></li>
<li><span id="nav_tab02">tab02を表示</span></li>
<li><span id="nav_tab03">tab03を表示</span></li>
<li><span id="nav_tab04">tab04を表示</span></li>
</ul>
</nav>
<div class="tab">
<ul>
<li id="tab01">tab01</li>
<li id="tab02">tab02</li>
<li id="tab03">tab03</li>
<li id="tab04">tab04</li>
</ul>
</div>
</div>
</body>
</html>style.css
@import url('https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css');
nav ul li.active{
list-style: none;
}
.tab ul li{
display: none;
}
.tab ul li.active{
display: block;
}
表示・非表示とかクリックしたのが分かる程度の内容だから大したもんじゃないです。
scripts.js
$(function(){
if($('.tab').length){
//同ページ内処理
$('nav ul li span').on('click',function(){
$('nav ul li').removeClass('active');
$(this).closest('li').addClass('active');
var ShowNumNav = $(this).attr('id').replace('nav_','');
$('.tab li').removeClass('active');
$('.tab li#' + ShowNumNav).addClass('active');
})
//外部リンク処理
var arg = new Object;
url = location.search.substring(1).split('&');
for(i=0; url[i]; i++) {
var k = url[i].split('=');
arg[k[0]] = k[1];
}
var ShowNumSend = arg.tab;
$('nav ul li span#nav_' + ShowNumSend).closest('li').addClass('active');
$('.tab li#' + ShowNumSend).addClass('active');
}
})今バージョンはパラメータが複数入っていても平気になった。
パラメータをforで連想配列に格納してるから、ひっぱってくるだけでいい。
個人的に特筆すべき点はifをいっぱい書かなくてもよくなったところ。
idとかclassをセレクタ内に突っ込めることを知ったので、1行で済ませられるようになった。
$('.tab li#' + ShowNumNav).addClass('active');こういうのね。便利ね。
動作について
.tabの各liにidを振って、それをnavとかパラメータのそれぞれのトリガーから読み取って.activeの付与をアレしてる。「tab01」みたいのをトリガーにも共通でつけてあるのは、js内で抽出後の整形を楽にするためのやつ。
idはにユニークであるべきだから正しいように見えて、idだと内部リンクに反応するからぶっちゃけ微妙。「data-～」で指定したほうがいいかもしれない。
で、そうやって他のこととか修正のことを考えたらli:nth-child()でいいんじゃないのって思ったりもするけど、.tab内に手を入れて順番をいじりたいってなったときにえらいことになるんでできない。
#tab01～#tab04は被らないための連番であって並び順と合わせる必要ないしね。
コメント