열개의 최신글 갤러리를 숨기고 보이고 이렇게 하고 싶습니다.
그래서 현재 이렇게 코딩을 해놨습니다.
Copy
<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개 / 댓글 1개
채택된 답변
+20 포인트
2017-05-21 (일) 18:16:23
메뉴부분을 좌우로 이동시키기 위해서 bxslider를 억지로 끌어넣으신것 같은데요.
메뉴부분을 원하시는 형태로 맞추기 위해 너무 멀리 돌아가시고 있는듯 싶습니다.
저라면 일반 탭을 적용시키고,
메뉴부분만 원하는 형태로 적용할 것 같습니다.
가령 좌우 스크롤이 가능하면서도 모양을 조정할 수 있는 플러그인들이 꽤나 존재합니다.
스크롤 관련 플러그인들이죠.
해당 플러그인들이 다양한 이벤트들이 존재할텐데 원하시는 모양의 구현이 가능한 것이 있나 살펴볼테고요. 없다면 탭 플러그인들이 제공하는 active 된 메뉴를 이용해서 좌,우 화살표 클릭시 이동할 양을 정하는 스크립트를 짤것 같습니다.
답변에 대한 댓글 1개
답변을 작성하려면 로그인이 필요합니다.