タブでパネルの切り替え

DEMO

  • 1: Lorem ipsum
  • 2: dolor sit
  • 3: consectetur adipisicing elit
  • 4: Fuga
  • 1: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga reprehenderit architecto consequuntur error totam porro maiores at! Sit, amet, commodi distinctio eius error quia et quam sint quas aspernatur fuga!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga reprehenderit architecto consequuntur
  • 2: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga reprehenderit architecto consequuntur error totam porro maiores at! Sit, amet, commodi distinctio eius error quia et quam sint quas aspernatur fuga! 2: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga reprehenderit architecto consequuntur error totam porro maiores at! Sit, amet, commodi distinctio eius error quia et quam sint quas aspernatur fuga!
  • 3: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga reprehenderit architecto consequuntur error totam porro maiores at! Sit, amet, commodi distinctio eius error quia et quam sint quas aspernatur fuga! 3: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga reprehenderit architecto consequuntur error totam porro maiores at! Sit,
  • 4: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga reprehenderit architecto consequuntur error totam porro maiores at! Sit, amet, commodi distinctio eius error quia et quam sint quas aspernatur fuga! 

<ul class="tab">
	<li class="select">内容１</li>
	<li>内容2</li>
	<li>内容3</li>
	<li>内容4</li>
</ul>
<ul class="content">
	<li> //内容１</li>
	<li class="hide"> //内容2</li>
	<li class="hide"> //内容3</li>
	<li class="hide"> //内容4</li>
</ul>


.tab {
	overflow:hidden;
	padding:3px 20px 0;
	}
.tab li {
	float:left;
	width:auto;
	margin-right:1px;
	padding:5px 25px;
	background:#ccc;
	}
.tab li.select {
	background:#eee;
	}
.content li {
	padding:20px;
	background:#eee;
	}
.hide {
	display:none;
	}


//jQuery必要
$(function() {
	$(window).on('load',function(){
		$(".tab li").click(function() {
			var index = $(".tab li").index(this);
			$(".content li").css("display","none");
			$(".content li").eq(index).css("display","block");
			$(".tab li").removeClass('select');
			$(this).addClass("select")
		});
	});
});

TOP