10개의 갤러리 최신글을 탭형식으로 보이게 하고 싶습니다.
본문
열개의 최신글 갤러리를 숨기고 보이고 이렇게 하고 싶습니다.
그래서 현재 이렇게 코딩을 해놨습니다.
<script type="text/javascript">
$(document).ready(function(){
$('.slider4').bxSlider({
slideWidth: 150,
minSlides: 6,
maxSlides: 7,
moveSlides: 1,
slideMargin: 10
});
});
</script>
<script type="text/javascript">
$(function(){
$("#tab1").css("display", "block");
$("#tab2").css("display", "none");
$("#tab3").css("display", "none");
$("#tab4").css("display", "none");
$("#tab5").css("display", "none");
$("#tab6").css("display", "none");
$("#tab7").css("display", "none");
$("#tab8").css("display", "none");
$("#tab9").css("display", "none");
$("#tab10").css("display", "none");
$("#tab_btn1").css("font-weight", "bold").css("background", "#7ba9de");
$("#tab_btn1").click(function(){
$("#tab1").stop().fadeIn(500);
$("#tab2").css("display", "none");
$("#tab3").css("display", "none");
$("#tab4").css("display", "none");
$("#tab5").css("display", "none");
$("#tab6").css("display", "none");
$("#tab7").css("display", "none");
$("#tab8").css("display", "none");
$("#tab9").css("display", "none");
$("#tab10").css("display", "none");
$("#tab_btn1").css("font-weight", "bold").css("background", "#7ba9de")
$("#tab_btn2").css("font-weight", "normal").css("background", "#fff")
$("#tab_btn3").css("font-weight", "normal").css("background", "#fff")
$("#tab_btn4").css("font-weight", "normal").css("background", "#fff")
$("#tab_btn5").css("font-weight", "normal").css("background", "#fff")
$("#tab_btn6").css("font-weight", "normal").css("background", "#fff")
$("#tab_btn7").css("font-weight", "normal").css("background", "#fff")
$("#tab_btn8").css("font-weight", "normal").css("background", "#fff")
$("#tab_btn9").css("font-weight", "normal").css("background", "#fff")
$("#tab_btn10").css("font-weight", "normal").css("background", "#fff")
});
$("#tab_btn2").click(function(){
$("#tab2").stop().fadeIn(500);
$("#tab1").css("display", "none");
$("#tab3").css("display", "none");
$("#tab4").css("display", "none");
$("#tab5").css("display", "none");
$("#tab6").css("display", "none");
$("#tab7").css("display", "none");
$("#tab8").css("display", "none");
$("#tab9").css("display", "none");
$("#tab10").css("display", "none");
$("#tab_btn2").css("font-weight", "bold").css("background", "#7ba9de")
$("#tab_btn1").css("font-weight", "normal").css("background", "#fff")
$("#tab_btn3").css("font-weight", "normal").css("background", "#fff")
$("#tab_btn4").css("font-weight", "normal").css("background", "#fff")
$("#tab_btn5").css("font-weight", "normal").css("background", "#fff")
$("#tab_btn6").css("font-weight", "normal").css("background", "#fff")
$("#tab_btn7").css("font-weight", "normal").css("background", "#fff")
$("#tab_btn8").css("font-weight", "normal").css("background", "#fff")
$("#tab_btn9").css("font-weight", "normal").css("background", "#fff")
$("#tab_btn10").css("font-weight", "normal").css("background", "#fff")
});
$("#tab_btn3").click(function(){
$("#tab3").stop().fadeIn(500);
$("#tab1").css("display", "none");
$("#tab2").css("display", "none");
$("#tab4").css("display", "none");
$("#tab5").css("display", "none");
$("#tab6").css("display", "none");
$("#tab7").css("display", "none");
$("#tab8").css("display", "none");
$("#tab9").css("display", "none");
$("#tab10").css("display", "none");
$("#tab_btn3").css("font-weight", "bold").css("background", "#7ba9de")
$("#tab_btn1").css("font-weight", "normal").css("background", "#fff")
$("#tab_btn2").css("font-weight", "normal").css("background", "#fff")
$("#tab_btn4").css("font-weight", "normal").css("background", "#fff")
$("#tab_btn5").css("font-weight", "normal").css("background", "#fff")
$("#tab_btn6").css("font-weight", "normal").css("background", "#fff")
$("#tab_btn7").css("font-weight", "normal").css("background", "#fff")
$("#tab_btn8").css("font-weight", "normal").css("background", "#fff")
$("#tab_btn9").css("font-weight", "normal").css("background", "#fff")
$("#tab_btn10").css("font-weight", "normal").css("background", "#fff")
});
$("#tab_btn4").click(function(){
$("#tab4").stop().fadeIn(500);
$("#tab1").css("display", "none");
$("#tab2").css("display", "none");
$("#tab3").css("display", "none");
$("#tab5").css("display", "none");
$("#tab6").css("display", "none");
$("#tab7").css("display", "none");
$("#tab8").css("display", "none");
$("#tab9").css("display", "none");
$("#tab10").css("display", "none");
$("#tab_btn4").css("font-weight", "bold").css("background", "#7ba9de")
$("#tab_btn1").css("font-weight", "normal").css("background", "#fff")
$("#tab_btn2").css("font-weight", "normal").css("background", "#fff")
$("#tab_btn3").css("font-weight", "normal").css("background", "#fff")
$("#tab_btn5").css("font-weight", "normal").css("background", "#fff")
$("#tab_btn6").css("font-weight", "normal").css("background", "#fff")
$("#tab_btn7").css("font-weight", "normal").css("background", "#fff")
$("#tab_btn8").css("font-weight", "normal").css("background", "#fff")
$("#tab_btn9").css("font-weight", "normal").css("background", "#fff")
$("#tab_btn10").css("font-weight", "normal").css("background", "#fff")
});
$("#tab_btn5").click(function(){
$("#tab5").stop().fadeIn(500);
$("#tab1").css("display", "none");
$("#tab2").css("display", "none");
$("#tab3").css("display", "none");
$("#tab4").css("display", "none");
$("#tab6").css("display", "none");
$("#tab7").css("display", "none");
$("#tab8").css("display", "none");
$("#tab9").css("display", "none");
$("#tab10").css("display", "none");
$("#tab_btn5").css("font-weight", "bold").css("background", "#7ba9de")
$("#tab_btn1").css("font-weight", "normal").css("background", "#fff")
$("#tab_btn2").css("font-weight", "normal").css("background", "#fff")
$("#tab_btn3").css("font-weight", "normal").css("background", "#fff")
$("#tab_btn4").css("font-weight", "normal").css("background", "#fff")
$("#tab_btn6").css("font-weight", "normal").css("background", "#fff")
$("#tab_btn7").css("font-weight", "normal").css("background", "#fff")
$("#tab_btn8").css("font-weight", "normal").css("background", "#fff")
$("#tab_btn9").css("font-weight", "normal").css("background", "#fff")
$("#tab_btn10").css("font-weight", "normal").css("background", "#fff")
});
$("#tab_btn6").click(function(){
$("#tab6").stop().fadeIn(500);
$("#tab1").css("display", "none");
$("#tab2").css("display", "none");
$("#tab3").css("display", "none");
$("#tab4").css("display", "none");
$("#tab5").css("display", "none");
$("#tab7").css("display", "none");
$("#tab8").css("display", "none");
$("#tab9").css("display", "none");
$("#tab10").css("display", "none");
$("#tab_btn6").css("font-weight", "bold").css("background", "#7ba9de")
$("#tab_btn1").css("font-weight", "normal").css("background", "#fff")
$("#tab_btn2").css("font-weight", "normal").css("background", "#fff")
$("#tab_btn3").css("font-weight", "normal").css("background", "#fff")
$("#tab_btn4").css("font-weight", "normal").css("background", "#fff")
$("#tab_btn5").css("font-weight", "normal").css("background", "#fff")
$("#tab_btn7").css("font-weight", "normal").css("background", "#fff")
$("#tab_btn8").css("font-weight", "normal").css("background", "#fff")
$("#tab_btn9").css("font-weight", "normal").css("background", "#fff")
$("#tab_btn10").css("font-weight", "normal").css("background", "#fff")
});
$("#tab_btn7").click(function(){
$("#tab7").stop().fadeIn(500);
$("#tab1").css("display", "none");
$("#tab2").css("display", "none");
$("#tab3").css("display", "none");
$("#tab4").css("display", "none");
$("#tab5").css("display", "none");
$("#tab6").css("display", "none");
$("#tab8").css("display", "none");
$("#tab9").css("display", "none");
$("#tab10").css("display", "none");
$("#tab_btn7").css("font-weight", "bold").css("background", "#7ba9de")
$("#tab_btn1").css("font-weight", "normal").css("background", "#fff")
$("#tab_btn2").css("font-weight", "normal").css("background", "#fff")
$("#tab_btn3").css("font-weight", "normal").css("background", "#fff")
$("#tab_btn4").css("font-weight", "normal").css("background", "#fff")
$("#tab_btn5").css("font-weight", "normal").css("background", "#fff")
$("#tab_btn6").css("font-weight", "normal").css("background", "#fff")
$("#tab_btn8").css("font-weight", "normal").css("background", "#fff")
$("#tab_btn9").css("font-weight", "normal").css("background", "#fff")
$("#tab_btn10").css("font-weight", "normal").css("background", "#fff")
});
$("#tab_btn8").click(function(){
$("#tab8").stop().fadeIn(500);
$("#tab1").css("display", "none");
$("#tab2").css("display", "none");
$("#tab3").css("display", "none");
$("#tab4").css("display", "none");
$("#tab5").css("display", "none");
$("#tab6").css("display", "none");
$("#tab7").css("display", "none");
$("#tab9").css("display", "none");
$("#tab10").css("display", "none");
$("#tab_btn8").css("font-weight", "bold").css("background", "#7ba9de")
$("#tab_btn1").css("font-weight", "normal").css("background", "#fff")
$("#tab_btn2").css("font-weight", "normal").css("background", "#fff")
$("#tab_btn3").css("font-weight", "normal").css("background", "#fff")
$("#tab_btn4").css("font-weight", "normal").css("background", "#fff")
$("#tab_btn5").css("font-weight", "normal").css("background", "#fff")
$("#tab_btn6").css("font-weight", "normal").css("background", "#fff")
$("#tab_btn7").css("font-weight", "normal").css("background", "#fff")
$("#tab_btn8").css("font-weight", "normal").css("background", "#fff")
$("#tab_btn9").css("font-weight", "normal").css("background", "#fff")
});
$("#tab_btn9").click(function(){
$("#tab9").stop().fadeIn(500);
$("#tab1").css("display", "none");
$("#tab2").css("display", "none");
$("#tab3").css("display", "none");
$("#tab4").css("display", "none");
$("#tab5").css("display", "none");
$("#tab6").css("display", "none");
$("#tab7").css("display", "none");
$("#tab8").css("display", "none");
$("#tab10").css("display", "none");
$("#tab_btn9").css("font-weight", "bold").css("background", "#7ba9de")
$("#tab_btn1").css("font-weight", "normal").css("background", "#fff")
$("#tab_btn2").css("font-weight", "normal").css("background", "#fff")
$("#tab_btn3").css("font-weight", "normal").css("background", "#fff")
$("#tab_btn4").css("font-weight", "normal").css("background", "#fff")
$("#tab_btn5").css("font-weight", "normal").css("background", "#fff")
$("#tab_btn6").css("font-weight", "normal").css("background", "#fff")
$("#tab_btn7").css("font-weight", "normal").css("background", "#fff")
$("#tab_btn8").css("font-weight", "normal").css("background", "#fff")
$("#tab_btn10").css("font-weight", "normal").css("background", "#fff")
});
$("#tab_btn10").click(function(){
$("#tab10").stop().fadeIn(500);
$("#tab1").css("display", "none");
$("#tab2").css("display", "none");
$("#tab3").css("display", "none");
$("#tab4").css("display", "none");
$("#tab5").css("display", "none");
$("#tab6").css("display", "none");
$("#tab7").css("display", "none");
$("#tab8").css("display", "none");
$("#tab9").css("display", "none");
$("#tab_btn10").css("font-weight", "bold").css("background", "#7ba9de")
$("#tab_btn1").css("font-weight", "normal").css("background", "#fff")
$("#tab_btn2").css("font-weight", "normal").css("background", "#fff")
$("#tab_btn3").css("font-weight", "normal").css("background", "#fff")
$("#tab_btn4").css("font-weight", "normal").css("background", "#fff")
$("#tab_btn5").css("font-weight", "normal").css("background", "#fff")
$("#tab_btn6").css("font-weight", "normal").css("background", "#fff")
$("#tab_btn7").css("font-weight", "normal").css("background", "#fff")
$("#tab_btn8").css("font-weight", "normal").css("background", "#fff")
$("#tab_btn9").css("font-weight", "normal").css("background", "#fff")
});
});
</script>
<div id="sub1">
<section id="tab_box">
<div class="slider4">
<div class="slide"><label for="tab_opt1" id="tab_btn1">교육</label></div>
<div class="slide"><label for="tab_opt2" id="tab_btn2">교통</label></div>
<div class="slide"><label for="tab_opt3" id="tab_btn3">여행</label></div>
<div class="slide"><label for="tab_opt4" id="tab_btn4">생활</label></div>
<div class="slide"><label for="tab_opt5" id="tab_btn5">의료</label></div>
<div class="slide"><label for="tab_opt6" id="tab_btn6">교육</label></div>
<div class="slide"><label for="tab_opt7" id="tab_btn7">맛집</label></div>
<div class="slide"><label for="tab_opt8" id="tab_btn8">배달</label></div>
<div class="slide"><label for="tab_opt9" id="tab_btn9">알뜰</label></div>
<div class="slide"><label for="tab_opt10" id="tab_btn10">커뮤</label></div>
</div>
<input type="radio" name="tab_opt" id="tab_opt1" checked>
<input type="radio" name="tab_opt" id="tab_opt2" />
<input type="radio" name="tab_opt" id="tab_opt3" />
<input type="radio" name="tab_opt" id="tab_opt4" />
<input type="radio" name="tab_opt" id="tab_opt5" />
<input type="radio" name="tab_opt" id="tab_opt6" />
<input type="radio" name="tab_opt" id="tab_opt7" />
<input type="radio" name="tab_opt" id="tab_opt8" />
<input type="radio" name="tab_opt" id="tab_opt9" />
<input type="radio" name="tab_opt" id="tab_opt10" />
<div id="tab1"><?php echo latest("theme/gallery", travel, 4, 50); ?></div>
<div id="tab2"><?php echo latest("theme/gallery", news, 4, 50); ?></div>
<div id="tab3"><?php echo latest("theme/gallery", traffic, 4, 50); ?></div>
<div id="tab4"><?php echo latest("theme/gallery", con1, 4, 50); ?></div>
<div id="tab5"><?php echo latest("theme/gallery", con2, 4, 50); ?></div>
<div id="tab6"><?php echo latest("theme/gallery", con3, 4, 50); ?></div>
<div id="tab7"><?php echo latest("theme/gallery", con4, 4, 50); ?></div>
<div id="tab8"><?php echo latest("theme/gallery", con5, 4, 50); ?></div>
<div id="tab9"><?php echo latest("theme/gallery", con6, 4, 50); ?></div>
<div id="tab10"><?php echo latest("theme/gallery", con7, 4, 50); ?></div>
</section>
</div>
</div>
하면 이렇게 나옵니다. 탭메뉴도 여행까지만 숨기고 보이고가 되고 그 다음부터는 먹히지가 않구요
보시는 대로 썸네일도 나왔다 안나왔다 합니다.
뭐가 문제일까요?
답변 1
메뉴부분을 좌우로 이동시키기 위해서 bxslider를 억지로 끌어넣으신것 같은데요.
메뉴부분을 원하시는 형태로 맞추기 위해 너무 멀리 돌아가시고 있는듯 싶습니다.
저라면 일반 탭을 적용시키고,
메뉴부분만 원하는 형태로 적용할 것 같습니다.
가령 좌우 스크롤이 가능하면서도 모양을 조정할 수 있는 플러그인들이 꽤나 존재합니다.
스크롤 관련 플러그인들이죠.
해당 플러그인들이 다양한 이벤트들이 존재할텐데 원하시는 모양의 구현이 가능한 것이 있나 살펴볼테고요. 없다면 탭 플러그인들이 제공하는 active 된 메뉴를 이용해서 좌,우 화살표 클릭시 이동할 양을 정하는 스크립트를 짤것 같습니다.
감사합니다 많은 도움이 되었습니다.
답변을 작성하시기 전에 로그인 해주세요.
