제이쿼리질문
본문
안녕하세요 초보 퍼블리셔 입니다 ㅠㅠ;
소스 개별적으로 할때는 되는데
두개를 합치니 소스가 탭메뉴는 되는데 이미지슬라이드는 안되서 글을올립니다
스크립트 충돌같은데 어떻게 해결을 해야할까요 ㅠㅠ
<script>
var swiper = new Swiper('.swiper-container', {
spaceBetween: 30,
centeredSlides: true,
autoplay: {
delay: 2500,
disableOnInteraction: false,
},
pagination: {
el: '.swiper-pagination',
clickable: true,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
$(function () {
$(".tab_content").hide();
$(".tab_content:first").show();
$("ul.tabs li").click(function () {
$("ul.tabs li").removeClass("active").css("color", "#797979");
//$(this).addClass("active").css({"color": "darkred","font-weight": "bolder"});
$(this).addClass("active").css("color", "#fff");
$(".tab_content").hide()
var activeTab = $(this).attr("rel");
$("#" + activeTab).fadeIn()
});
});
</script>
답변 3
<div id="tab1" class="tab_content"> 안에 슬라이드 요소 </div>
탭안에 슬라이드 요소가 들어가 있네요.
보이는 소스상에는 ul li 요소가 보이지 않지만
슬라이드 관련 css 에서 분명 ul li 요소에 대한 스타일이 있을겁니다.
그게 탭에 영향을 받는 증상 입니다.
탭 스크립트 안에서 ul 안에 li 안에 요소들에 적용되는거라서
그 안에 슬라이드가 추가로 있다면 그 슬라이드 ul li 요소도 영향을 받으니 그렇습니다.
슬라이드 관련 css 에서 ul li 안에 스타일을 !important 다 시켜줘야 슬라이드데로 적용 될듯 합니다.
슬라이드에 li 들어가는건 없습니다 ㅠ
<div class="main_we">
<div class="main_listt">
<h2>KT샵 이용고객의 평가는? </h2>
<div id="container">
<ul class="tabs">
<li class="active" rel="tab1">iPhon X</li>
<li rel="tab2">iPhon 8</li>
<li rel="tab3">LG V30</li>
<li rel="tab4">Galaxy S8</li>
</ul>
<div class="tab_container">
<div id="tab1" class="tab_content">
<!-- Swiper -->
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="le">
<img src="C:\Users\ara\Desktop/test111.png">
</div>
<div class="ri">
<h2>Galaxy S8</h2>
<p>잘 모르는 것도 친절히 알려주시고, 직접 찾아와오셔서 해주시는거라 편하고 좋네요 감사합니다.</p>
<div class="tx">2017.12.30 홍길동</div>
</div>
</div>
<div class="swiper-slide">Slide 2</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
<!-- Add Arrows -->
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
</div>
<!-- #tab1 -->
<div id="tab2" class="tab_content">2222Mortal Kombat returns after a lengthy hiatus and puts players back into the Tournament for 2D fighting with gruesome combat.</div>
<!-- #tab2 -->
<div id="tab3" class="tab_content">3333Halo: Reach is the culmination of the superlative combat, sensational multiplayer, and seamless online integration that are the hallmarks of this superb series.</div>
<!-- #tab3 -->
<div id="tab4" class="tab_content">3333H44.</div>
<!-- #tab3 -->
</div>
<!-- .tab_container -->
</div>
</div>
<script>
var swiper = new Swiper('.swiper-container', {
spaceBetween: 30,
centeredSlides: true,
autoplay: {
delay: 2500,
disableOnInteraction: false,
},
pagination: {
el: '.swiper-pagination',
clickable: true,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
$(function () {
$(".tab_content").hide();
$(".tab_content:first").show();
$("ul.tabs li").click(function () {
$("ul.tabs li").removeClass("active").css("color", "#797979");
//$(this).addClass("active").css({"color": "darkred","font-weight": "bolder"});
$(this).addClass("active").css("color", "#fff");
$(".tab_content").hide()
var activeTab = $(this).attr("rel");
$("#" + activeTab).fadeIn()
});
});
</script>
전체 소스입니다
