탭메뉴 문의드립니다.
관련링크
본문
초보 웹퍼블입니다
현재 수정하고있는 홈페이지가 있는데
탭메뉴인거같은데
자바스크립트가 보이질 않습니다..
의료진소개 페이지인데 2명에서 3명으로변경해야하는데
어떻게 변경해야할까요 ㅠ
상단에 의료진사진은
ul>li*3으로 css 33.333333%로하면 되는데
하단에 새로생긴 li 페이지가 보이질 않습니다
부탁드려요!
답변 1
/include/js/main.js
제일 하단에 보시면
$(document).ready(function(){
function info_toggle(who) {
$(".doctor_career.doctor_park").hide();
$('ul.staff_list .'+who).click(function(){
$(".doctor_career").hide();
$(".doctor_career."+who).show();
$(".staff_list li").removeClass('doctor_on');
$(this).parent().addClass('doctor_on');
});
}
info_toggle('doctor_park');
info_toggle('doctor_sung');
});
이렇게 돼 있습니다. 하나 추가하기엔 조금 비효율 적이라 조금 고쳐보면
$(document).ready(function(){
$(".staff_list a").click(function(){
let target=$(this).data('target');
$(".doctor_career").hide();
$(target).show();
$(".staff_list li.doctor_on").removeClass("doctor_on");
$(this).parent().addClass('doctor_on');
});
$(".doctor_career").hide();
$(".doctor_sung").show();
});
이렇게 바꿔주시고
.staff_list 밑에 있는 a 태그가
<a href="javascript:;" class="doctor_sung">
현재 이렇게 돼 있는데
<a href="javascript:;" class="doctor_sung" data-target=".doctor_sung">
이런식으로 끝부분에 data-target 값을 넣어주시면 됩니다.
추가하실땐 staff_list 엔
<a href="javascript:;" class="doctor_클래스명" data-target=".doctor_클래스명">
<div class="content_01 doctor_career doctor_클래스명">
<div class="content_02 doctor_career staff doctor_클래스명">
이런식으로 넣으시면 여러명 더 추가할수 있습니다.
헉 친절한 설명 너무 감사해요 ㅎㅎ 너무도움되었어요 감사해요 ㅎ
