こんにちは。
制作部の山口です。私は横に長い静岡出身なのですが、最寄りの新幹線の駅は静岡駅です。静岡駅には「ひかり」と「こだま」が止まります。「のぞみ」は止まりません。この「ひかり」静岡着のものは1時間に1本あるのですが、東京/品川からもう1本静岡に止まらないものも出ています。私はこの静岡着でない「ひかり」に2度乗ったことがあります。1度目は友人の結婚式の為帰省した時。（式に間に合わないかかも！と道ずれになった同郷の友人と大慌てでした。）もうそんな失敗はしない！とちゃんと検索してから乗車するのですが、（にも関わらず・・）先日2度目を行ってしまいました。虚しい気持ちで豊橋から40分掛けて戻りました。静岡県民あるある！ではないですよね・・。
話は変わりまして、先日お客様のサイト制作の中で、簡単なJQueryのソースを書くことに挑戦しましたのでご紹介します。
①まず、イベントを登録します。
<a href=”＃” onclick=”btn_click(n); return false;” ><img src=”img/aaa.png” ></a>
・onclick=”btn_click(n); クリックされたら、関数 btn_click(n);(nは、実行する関数の数分の何番目かの数字を入れてください)
・aタグにonclickを付ける時、return false;を記入することで、返り値として falseを返し、href=”＃”（ページのトップへのアンカーリンク）の機能は実行されず、onclickの機能のみ実行されます。
②次にクリックされたら表示/非表示したいものにid名を付けます。
<div id=”tab1″>
～表示したいもの～
</div>
③最後に関数 btn_click(n)の処理を記入します。
<script>
document.getElementById(“tab1″).style.visibility =”hidden”;
function btn_click(n){
var y1 = document.getElementById(“tab1”);
if(y1.style.visibility==”visible”){
// hiddenで非表示
y1.style.visibility =”hidden”;
}else{
// visibleで表示
y1.style.visibility =”visible”;
}
}
</script>
・最初に②で設定したid=”tab1″をvisibilityプロパティのhiddenで非表示にし、if文を使い、表示（visible）/非表示（hidden）を切り替えます。以上でできます！
これを見たら、できました！！わかりやすかったです。
しかし、表示/非表示を複数切り替えたい時はどうするの？？？？そうです！ここからが難しかったです。
ここからは、プログラマーの先輩に教えていただき、完成に持っていくことができました。
for文を使用し、複数繰り返せるようにしました。
<script>
$(document).ready( function(){
btn_click(1);
});
function btn_click($no){
for ($i = 1; $i < 7; $i++){
$(‘#tab’ + $i).css(‘display’,’none’);
if ($no == $i){
$(‘#tab’ + $i).fadeIn(2000);
}
}
}
</script>
【1】 関数 btn_click がクリック時に ’#tab’ + $i が非表示になります。この ’#tab’ + $i とは #tabにfor文（初期値 $i = 1; が 7まで $i < 7; 1つずつ $i++)で取っていったものが入り、#tab1～#tab7を差します。（7個表示/非表示したいものがあります）
ここで、JQuery用のcssメソッドを使用し非表示にしています。
【2】 次に、if文で ’#tab’ + $i を表示しています。$no == $i で、$no と$iが同じだった場合に処理を実行します。
関数 btn_click（$no）と’#tab’ + $iの数字部分は同じ数字にすることで、$no番目がクリックした時に’#tab’ + $iが表示されるという仕組みです。
【3】 一番上に
$(document).ready(function(){
//何かしらの処理
});
を記述しHTML=DOMの読み込みが終わったらfunction()の中の処理(=なにかしらの処理)を実行します。
最初にbtn_click（1）が実行され、表示されている状態にします。
以上で、表示/非表示を複数切り替えることができます。
ちなみに、この処理を2か所で実行したい！って時、（これもつまずきました。）は、
①で付ける関数名、②で付けるid名を、それぞれbtn_click2（n）、tab2（n）※nは一緒
などにして、$noも$no2などにして、$i も$aなどにして呼び出せば実行されます。
今度こそ以上です。長文失礼いたしました。
私は、スクールにてJavaScriptとPHPを学びましたが、コピペだけだとどうしてもプログラムを解読できないので
こうして噛み砕いて読み解いています。簡単な動きから、ソースを書けるようになりたいですが、
まだまだ道のりは遠いです。頑張らないといけないなと思います。
もし、表示/非表示動きをつけたい！って時に是非参考にしてみてください。
