스크립트질문좀드리겠습니다.
본문
안녕하세요 질문좀 드리겠습니다.
탭메뉴 스크립트인데요 class="active" rel="tab2" 이부분인데요
처음 보여지는 탭메뉴를 tab2로 지정하고싶은데 css는 바뀌는데 내용은 변경이안됩니다 ㅠ
어떻게 해야지 tab2로 먼저 나오게끔 할수있을까요
<div class="mb02">
<h2>가장 많이 찾으시는 <span>모바일 BEST</span></h2>
<ul class="tabs">
<li rel="tab1">키즈/10대</li>
<li class="active" rel="tab2">20대</li>
<li rel="tab3">30대</li>
</ul>
<div class="bestMore">
<a href="/shop/?type=1">전체보기</a>
</div>
</div>
<div class="tab_container">
<div id="tab1" class="tab_content">
<div class="mb03">
<?php echo display_banner('10대메인추천1개', 'boxbanner.skin.php'); ?>
</div>
<div class="mb04">
<ul>
<?php echo display_banner('10대상품3개', 'boxbanner10.skin.php'); ?>
</ul>
</div>
</div>
<!-- #tab1 -->
<div id="tab2" class="tab_content">
<div class="mb03">
<?php echo display_banner('20대메인추천1개', 'boxbanner.skin.php'); ?>
</div>
<div class="mb04">
<ul>
<?php echo display_banner('20대상품3개', 'boxbanner10.skin.php'); ?>
</ul>
</div>
</div>
<!-- #tab2 -->
<div id="tab3" class="tab_content">
<div class="mb03">
<?php echo display_banner('30대메인추천1개', 'boxbanner.skin.php'); ?>
</div>
<div class="mb04">
<ul>
<?php echo display_banner('30대상품3개', 'boxbanner10.skin.php'); ?>
</ul>
</div>
</div>
<!-- #tab3 -->
</div>
<script>
$(function () {
$(".tab_content").hide();
$(".tab_content:first").show();
$("ul.tabs li").click(function () {
$("ul.tabs li").removeClass("active").css("color", "#000");
$(this).addClass("active").css("color", "#fff");
$(".tab_content").hide()
var activeTab = $(this).attr("rel");
$("#" + activeTab).fadeIn()
});
});
</script>
답변 3
<script>
$(function () {
$(".tab_content").hide();
$("#tab2").show();
$("ul.tabs li").click(function () {
$("ul.tabs li").removeClass("active").css("color", "#000");
$(this).addClass("active").css("color", "#fff");
$(".tab_content").hide()
var activeTab = $(this).attr("rel");
$("#" + activeTab).fadeIn()
});
});
</script>
$(function () {
$(".tab_content").hide();
//$(".tab_content:first").show();
$(".tab_content:eq(1)").show(); //<- 이부분을 변경하세요 처음은 0 부터입니다
$("ul.tabs li").click(function () {
$("ul.tabs li").removeClass("active").css("color", "#000");
$(this).addClass("active").css("color", "#fff");
$(".tab_content").hide()
var activeTab = $(this).attr("rel");
$("#" + activeTab).fadeIn()
});
});
<script>
$(function () {
$(".tab_content").hide();
$("#tab2").show();
$("ul.tabs li").click(function () {
$("ul.tabs li").removeClass("active").css("color", "#000");
$(this).addClass("active").css("color", "#fff");
$(".tab_content").hide()
var activeTab = $(this).attr("rel");
$("#" + activeTab).fadeIn()
});
});
</script>
답변을 작성하시기 전에 로그인 해주세요.
