webサイト制作の勉強|1月ブログ

webサイト制作の勉強に関する解説ブログです。

モバイルファーストで制作しているサイトにjQueryを導入

今回のコーポレートサイトには複数のjqueryを導入します。

以上のように今回は多くのjQueryを導入する事になりますが、1つ1つしっかりと動きを理解しましょう。
また、改めてTraversingの使い方をしっかりとマスターしましょう。

タブパネルとアコーディオンパネル
$(function(){
	
	//タブパネル部分
	$('#tab li a').on('click', function(){ 
	  $(this).parent().addClass('current').siblings('.current').removeClass('current');
		
		 var tabTarget = $(this).attr('href'); //クリックしたa hrefの値を変数化する
		 $( tabTarget ).addClass('current').siblings('.current').removeClass('current');
	 return false;
	});
	
	//アコーディオンパネル部分
	$('h2.aco_title').on('click', function(){ 
	  $(this).next('dl:not(:animated)').slideToggle(300);
	});
});