空の回廊 - 時々web・創作系 -

独りよがりなWebLog(たまにTemporary)

jQueryで表示切り替え

n番目のliをクリックすると対応した別セクション(section)の#charactor(n)(nは数字)を表示すると言うのをjQueryで勉強で作ってみました。
オリジナルシナリオのキャラクター紹介のページに使う予定です。

そう言うとかっこいいけど、プロの人から見たら大した事ない上に色々ご指摘があるかもしれません。
(自己責任でお願いします)

デモページ

各キャラクター紹介のエリアはposition: abosolute;で同じ場所に重ねてdisplay: none;で表示を消してます。
デフォルトとして一番上(最初)のキャラだけ表示。(必要に応じて表示時アニメーション用cssのclassもこのidだけ追加しておく)

─────初期設定
※charactor と $beforeID はコンテンツに合わせて適当な名前に

最初に$beforeIDに#charabtor1を指定(格納)
$beforeIDはクリックされた時、1個前にクリックして表示させたidを保管しておく変数


─────liがクリックされる度、

  1. 何番目のliがクリックされたかをvar indexで保存して、
  2. 1個前に表示させたidをまず非表示(&表示時アニメーション用cssのclassを削除)に
  3. 今クリックで表示されたidを $beforeID = $('#charactor' + index); で上書きで保管

その後

  1. (そのidに表示時アニメーション用cssのclass追加)
  2. そのidのセクションを表示

───────────────────

こんな感じで…

$(function() {
  var $beforeID = $('#charactor1'); //初期設定(仮に指定)

////////クリックされたら////////
  $('#charaList li').on('click',function(){

    //何番目のliがクリックされたか
    var index = $('#charaList li').index(this) + 1;

    //$beforeID(1つ前にクリックされたID)を非表示&アニメーションclass削除
    $beforeID.fadeOut(600);
    $beforeID.removeClass("viewAnimation");

    //今クリックで表示されたIDを保管(上書き)#charactor + index
    $beforeID = $('#charactor' + index);

    //(アニメーションclass追加&)そのID($beforeID)を表示
    $beforeID.addClass("viewAnimation");
    $beforeID.fadeIn(1000);
  });
});
<div id="charaViewWrap">
<div id="charaList">
	<ul>
	<li>キャラクター001</li>
	<li>キャラクター002</li>
	<li>キャラクター003</li>
	<li>キャラクター004</li>
	<li>キャラクター005</li>
	</ul>
</div>

<section class="charaView viewAnimation" id="charactor1">
	<h3>キャラクター001</h3>
	<p>説明001-01</p>
	<p>説明001-02
</p>
</section>

<section class="charaView" id="charactor2">
	<h3>キャラクター002</h3>
	<p>説明002-01</p>
	<p>説明002-02
</p>
</section>

<section class="charaView" id="charactor3">
	<h3>キャラクター003</h3>
	<p>説明003-01</p>
	<p>説明003-02
</p>
</section>

<section class="charaView" id="charactor4">
	<h3>キャラクター004</h3>
	<p>説明004-01</p>
	<p>説明004-02
</p>
</section>

<section class="charaView" id="charactor5">
	<h3>キャラクター005</h3>
	<p>説明005-01</p>
	<p>説明005-02
</p>
</section>

</div> <!----- charaVeiwArea end ----->