ウェブ、ショウジン

jQueryによるタブメニューに画像ボタンを使った内容の変更・切り替え

2012-4-22
Category
jQuery

jQueryを使って、タブメニュー(画像)による内容の切り替えは

jQueryを使ったタブ(画像)による画面切り替え

をよく使うのですが、今回はこれだとうまいこといかない実装が必要になったので、あらためて自分で書いてみました。(前述の記事のものはその記事内にあるように参考記事のものを流用していて、細かいところまで自分で理解していなかったということもあり、これをカスタマイズするのは逆に面倒だったので)

今回はとくに「それぞれのタブのカレント時の画像の状態」と「タブ画像にホバーした際の画像の状態」が異なるデザインに対応する必要があったので、jQueryでのコードとは別に、ホバー時の画像の変化はCSSで対応しました。(透明度の変化だけだったので)

あと、タブで切り替わる内容の中にリンク(別のタブメニューへの)もあり、これについても前述のその「ふだんよく使う」やつではすんなり実装できそうになかったので、あらためて自分で書いてみました。

jQueryは自分ではふだんほとんど書くことがないので(参考記事を探して流用するばかりで)今回のコードもスマートさには程遠い内容で大変お粗末ですが、自分のようにこのへんの理解が浅いレベルの人なんかには逆に扱いやすいんじゃないかなと。

jQueryではcssメソッドとattrメソッドを使って属性値をタブメニューごとに設定しているだけです。

デモ画面はこちら
*タブメニュー画像のデザインが(カレント時、通常時)適切じゃなくてわかりにくいですが(TдT)

HTML

	<ul id="tabMenu">
		<li class="first"><a href="#"><img src="img/btn_first_current.png" width="100" height="20" alt="First" class="hover" /></a></li>
		<li class="second"><a href="#"><img src="img/btn_second.png" width="100" height="20" alt="Second" class="hover" /></a></li>
		<li class="third"><a href="#"><img src="img/btn_third.png" width="100" height="20" alt="Third" class="hover" /></a></li>
	</ul>

	<div id="wrapper">
		
		<div id="first">

			First<br />
			First<br />
			First<br />
			First<br />
			First<br />
			First<br />
			First<br />
			First<br />
			First<br />
			First<br />
			First<br />
			First<br />
			First<br />
			First<br />
			First<br />
			First<br />
			First<br />
			First<br />
			First<br />
			First<br />
			First<br />
			First<br />
			First<br />
			First<br />
			First<br />
			First<br />
			First<br />
			First<br />
			First<br />
			First<br />
			<a href="#" class="link_third">Third</a>

		<!-- // #first --></div>

		<div id="second">

			Second<br />
			Second<br />
			Second<br />
			Second<br />
			Second<br />
			Second<br />
			Second<br />
			Second<br />
			Second<br />
			Second<br />
			Second<br />
			Second<br />
			Second<br />
			Second<br />
			<a href="#" class="link_third">Third</a>

		<!-- // #second --></div>

		<div id="third">

			Third<br />
			Third<br />
			Third<br />
			Third<br />
			Third<br />
			Third<br />
			Third<br />
			Third<br />
			Third<br />

		<!-- // #third --></div>


	<!-- // #wrapper --></div>

CSS

#tabMenu li{
	float:left;
	margin-right:5px;
	height:20px;
}

#tabMenu{ /zoom : 1;}
#tabMenu:after{ content : ''; display : block; clear : both; height:0; }


#wrapper{
	width:310px;
	background:#fff;
}

#first, #second, #third{
	padding:2em;
	border:1px solid #ccc;
}

#second, #third{
	display:none;
}

/* Hover */
.hover:hover{ 
	filter:alpha(opacity=70);  /* IE7以下用 */
	-ms-filter:"alpha(opacity=70)"; /* IE8用 */
	-moz-opacity:0.7; /* Firefox 1.5未満, Netscape用 */
	-khtml-opacity:0.7; /* Safari 1.x, 他khtmlに対応したブラウザ用  */
	opacity:0.7; /* Firefox 1.5以上, Opera, Safari用 */
}

jQuery

$(function(){
	
	// Firstボタンをクリックした時の処理
	$(".first a").click(function(){
		$("#first").css("display", "block"),
		$("#second").css("display", "none"),
		$("#third").css("display", "none"),
		$(".first img").attr("src", "img/btn_first_current.png"),
		$(".second img").attr("src", "img/btn_second.png"),
		$(".third img").attr("src", "img/btn_third.png")
	});

	// Secondボタンをクリックした時の処理
	$(".second a").click(function(){
		$("#first").css("display", "none"),
		$("#second").css("display", "block"),
		$("#third").css("display", "none"),
		$(".first img").attr("src", "img/btn_first.png"),
		$(".second img").attr("src", "img/btn_second_current.png"),
		$(".third img").attr("src", "img/btn_third.png")
	});

	// Thirdボタンをクリックした時の処理
	$(".third a").click(function(){
		$("#first").css("display", "none"),
		$("#second").css("display", "none"),
		$("#third").css("display", "block"),
		$(".first img").attr("src", "img/btn_first.png"),
		$(".second img").attr("src", "img/btn_second.png"),
		$(".third img").attr("src", "img/btn_third_current.png")
	});

	// コンテンツ内のThirdへのリンクをクリックした時の処理
	$(".link_third").click(function(){
		$("#first").css("display", "none"),
		$("#second").css("display", "none"),
		$("#third").css("display", "block"),
		$(".first img").attr("src", "img/btn_first.png"),
		$(".second img").attr("src", "img/btn_second.png"),
		$(".third img").attr("src", "img/btn_third_current.png")
	});

});

Categories

Tag Cloud

AdMob Android Apache centos CodeIgniter EC-CUBE facebookアプリ facebookページ feed Firefox Flash google googleanalytics htaccess iPad iPhone JavaScript lamp mobile nginx ogp pear php plugin rollover rss sendmail setting smarty ssh Titanium Mobile Titanium Studio tutorial ubuntu vim VirtualBox vmware vps Windows WordPress xampp youtube さくらインターネット アクセス解析 カスタム投稿