※ ChatGPTを利用し、要約された質問です(原文:jQueryタブメニュー内、パネル間のリンク方法。)
jQueryタブメニュー内のパネル間リンク方法
このQ&Aのポイント
jQueryを使用してタブメニュー内のパネル間のリンクを実装する方法について教えてください。
例として、test1のリンクからtab2へ遷移する方法を教えてください。
タブメニューでは、クリックイベントを使用して表示するパネルを切り替えることができます。
jQueryタブメニュー内、パネル間のリンク方法。
javascript勉強中です。
立て続けに質問してしまい、ご迷惑おかけしておりますが協力していただければ幸いです。
下記のjQueryタブメニューですが、パネル内から他のパネルへのリンクを実装するには、どのように書いたらいいか教えていただけないでしょうか。例としてtest1のリンクからtab2へ行くように、です。
(下記実装されている機能は、タブメニューと他のページからのタブへのダイレクトリンクです。)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
jQuery(function($){
$(".area").hide();
var tabs = $(".tab01 li");
tabs.click(function(){
var i = tabs.removeClass("active").index(this);
tabs.eq(i).addClass("active");
$(".content .area").hide().eq(i).fadeIn(400);
return false;
});
var hash = window.location.hash.match(/#tab(\d+)/);
hash = hash?(tabs.eq(hash[1]-1).length?hash[1]-1:0):0;
tabs.eq(hash).click();
});
</script>
</head>
<body>
<div id="tabs">
<ul class="tab01">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
<div class="content">
<div class="area" id="tab1"><a href="#tab2">test1</a></div>
<div class="area" id="tab2">test2</div>
<div class="area" id="tab3">test3</div>
</div>
</div>
</body>
</html>
何卒宜しくお願い申し上げます。
お礼
大変勉強になりました。 どうもありがとうございました!