https://nabari-south.com/js/tab.js

1$(document).ready(function(){
2	
3	// 初期設定
4		
5		// #navs直下の全li要素の中から最初のli要素に.selectを追加
6		$("#navs > li:first-child").addClass("select");
7		// #navs直下の全li要素にマウスオーバーしたらリンク要素に偽装
8		$("#navs > li").hover(function(){
9			$(this).css("cursor","pointer");
10		},function(){
11			$(this).css("cursor","default");
12		});
13		
14		// #tab直下の全div要素を非表示
15		$("#tab > div").hide();
16		// #tab直下の全div要素の中から最初のdiv要素を表示
17		$("#tab > div:nth-child(2)").show();
18	
19	
20	// 複数のタブの場合の追加処理
21	$("#navs > li").hover(
22		function () {
23			// マウスオーバーしているli要素の親属性の親属性に.hoversを追加
24			$(this).parent().parent().addClass("hovers");
25		},
26		function () {
27			// マウスオーバー解除の時に.hoversを削除
28			$(this).parent().parent().removeClass("hovers");
29		}
30	);
31
32	// タブ切替処理
33	$("#navs > li").click(function () {
34		// .hovers下の#navs直下の全li要素のclass属性を削除
35		$("#navs > li").filter(".hovers li").removeClass("select");
36		// クリックしたli要素に.selectを追加
37		$(this).addClass("select");
38		// .hovers下の#tab直下の全div要素を非表示
39		$("#tab > div").filter(".hovers div").hide();
40		// クリックしたタブのインデックス番号と同じdiv要素をフェード表示
41		$("#tab > div").eq($("#navs > li").index(this)).show();
42	});
43	
44
45// 初期設定
46		
47		// #navs直下の全li要素の中から最初のli要素に.selectを追加
48		$("#navs02 > li:first-child").addClass("select");
49		// #navs直下の全li要素にマウスオーバーしたらリンク要素に偽装
50		$("#navs02 > li").hover(function(){
51			$(this).css("cursor","pointer");
52		},function(){
53			$(this).css("cursor","default");
54		});
55		
56		// #tab直下の全div要素を非表示
57		$("#tab > div").hide();
58		// #tab直下の全div要素の中から最初のdiv要素を表示
59		$("#tab > div:nth-child(2)").show();
60	
61	
62	// 複数のタブの場合の追加処理
63	$("#navs02 > li").hover(
64		function () {
65			// マウスオーバーしているli要素の親属性の親属性に.hoversを追加
66			$(this).parent().parent().addClass("hovers");
67		},
68		function () {
69			// マウスオーバー解除の時に.hoversを削除
70			$(this).parent().parent().removeClass("hovers");
71		}
72	);
73
74	// タブ切替処理
75	$("#navs02 > li").click(function () {
76		// .hovers下の#navs直下の全li要素のclass属性を削除
77		$("#navs02 > li").filter(".hovers li").removeClass("select");
78		// クリックしたli要素に.selectを追加
79		$(this).addClass("select");
80		// .hovers下の#tab直下の全div要素を非表示
81		$("#tab > div").filter(".hovers div").hide();
82		// クリックしたタブのインデックス番号と同じdiv要素をフェード表示
83		$("#tab > div").eq($("#navs > li").index(this)).show();
84	});
85	
86});