탭메뉴 관련(자바스크립트)
본문
탭 메뉴 관련으로 작성을 하고 있는데요.
다른 곳에서 사용했던 것 가져와서 해보고 있는데 안되네요..
뭐가 문제인지..
<script type="text/javascript">
$('.event_focus a').click(function(){
$('.event_focus').removeClass('focus');
$(this).parent().addClass('focus');
})
// 연혁 소개 TAB
$(".event_focus a").click(function(){
var key = $(this).attr("id");
console.log(key);
if( $("#his_"+key).css("display") != "block" ){
$(".his_con_item").hide();
$("#his_"+key).show();
}
})
</script>
위에가 javascript 영역이며,
HTML 영역은
<!-- 탭 메뉴 -->
<div class="blue_tab_set" >
<ul>
<li class="event_focus focus"><a id="pres" href="#" title="2011년 ~ 현재">2011년 ~ 현재</a></li>
<li class="event_focus"><a id="back" href="#" title="2000년~2010년">2000년~2010년</a></li>
</ul>
</div>
<!-- 탭 메뉴 끝-->
<div id="his_pres" class="his_con_item">
<div class="ctt_img">
aaaaa
</div>
</div>
<div id="his_back" class="his_con_item hidden">
<p>테스트</p>
</div>
css는
ul {list-style-type:none;margin:0;padding:0;}
.blue_tab_set {width:745px;margin:0 auto;margin-top:50px;height:50px;}
.blue_tab_set li {width:368px; margin-bottom:40px;border:1px solid #6d6d6d;display:inline-block;}
.blue_tab_set li a {display:block; width:100%; height:50px; text-align:center; font-size:14px; color:#525252;line-height:50px;white-space:nowrap; overflow:hidden; word-break:break-all; text-overflow:ellipsis;}
.blue_tab_set li.focus a {color:#fff; background:url("../img/blue_tab_bg_over.gif") no-repeat;}
.hidden {display:none;}
이렇게 구성하였습니다.
자바스크립트 click이 작동을 하지 않습니다... 답변을 부탁드려요...
답변 1
<script type="text/javascript">
$(function() {
$('.event_focus a').click(function(){
$('.event_focus').removeClass('focus');
$(this).parent().addClass('focus');
})
// 연혁 소개 TAB
$(".event_focus a").click(function(){
var key = $(this).attr("id");
console.log(key);
if( $("#his_"+key).css("display") != "block" ){
$(".his_con_item").hide();
$("#his_"+key).show();
}
})
});
</script>
