Jquery tab select contents display block, none, show, hide

Jquery tab select contents display block, none, show, hide

 

 

 

<style>

.s41_tab_name {width:100%; font-family:'Malgun Gothic'; font-size:12px; font-weight:bold;}

.s41_tab_name li {float:left; width:88px; height:23px; *height:24px; margin-right:10px; text-align:center; border:1px solid #cccccc;}

.s41_tab_name li a {width:100%; padding:2px 0 3px 0; display:block; text-decoration:none; background:#f4f4f4; color:#7d7d7d;}

 

 

.selected {background-color:#2777b4; color:#fff;}

 

.actors_space {width:100%; height:2px; margin:10px 0 26px 0; border-bottom:1px solid #ebebeb; border-top:1px solid #ebebeb;}

</style>

<script>

$(document).ready(function(){

$(".tab_sel").click(function(){

// 현재순서 값찾기

var idx = $(".tab_sel").index( $(this) );

$(this).css({

"background-color":"#2777b4", 

"color":"#fff"

});

// 내용 loop

$(".cont_desc").each(function(didx){

if(idx == didx){

$(this).show();

}else{

$(this).hide();

$(".tab_sel").eq(didx).css({

"background-color":"#f4f4f4", 

"color":"#7d7d7d"

});

}

});

});

});

</script>

 

<ul class="s41_tab_name">

<li><a class="tab_sel" href="#null" >개요</a></li>

<li><a class="tab_sel" href="#null">시공과정</a></li>

<li><a class="tab_sel" href="#null">경제성</a></li>

<li><a class="tab_sel" href="#null">안전성</a></li>

<li><a class="tab_sel" href="#null">사용성</a></li>

<div class="clear"></div>

</ul>

<div class="actors_space"></div>

<div class="cont_desc"><img src="<?=$g4[path]?>/img/s41_01.jpg" ></div>

<div class="cont_desc"><img src="<?=$g4[path]?>/img/s41_02.jpg" ></div>

<div class="cont_desc"><img src="<?=$g4[path]?>/img/s41_03.jpg" ></div>

<div class="cont_desc"><img src="<?=$g4[path]?>/img/s41_04.jpg" ></div>

 

<div class="cont_desc"><img src="<?=$g4[path]?>/img/s41_05.jpg" ></div>