콘텐츠 탭메뉴에 관한 질문...
본문
<div class="txtcont clear">
<ul id="tab" class="pagelink">
<li class="select">1</li>
<li class="lastchild">2</li>
</ul>
<div class="content">
<p>content1</p>
</div>
<div class="content disnon">
<p>content2</p>
</div>
html파일이구요,
<script>
$(function() {
$("#tab li").click(function() {
var num = $("#tab li").index(this);
$(".content").addClass('disnon');
$(".content").eq(num).removeClass('disnon');
$("#tab li").removeClass('select');
$(this).addClass('select')
});
});
</script>
스크립트...파일..이고..
<style>
.pagelink {
margin-bottom:20px;
}
.pagelink li {
display: inline;
border-left: 1px solid #999;
padding-top: 0;
padding-right: 4px;
padding-bottom: 0;
margin-bottom:0;
padding-left: 8px;
}
.pagelink li.lastchild {
border-right: 1px solid #999;
padding-right: 7px;
}
#tab li {
cursor: pointer;
}
#tab li.select {
color:#FF6633;
}
.disnon {
display: none;
}
</style>
스타일 파일인데요..
콘텐츠 내용을 탭으로 이동시키려고 하는데...
콘텐츠 내용이 길어서 위에도 설치하고, 밑에도 설치하려고 하는데..
지금 위에 있는 1, 2 탭은 잘 움직이는데...
같은 ul내용을 밑에다 그대로 복사해서 넣으면 콘텐츠 이동이 안되고 백지상태가 되네요..
아.. 설명하기가 너무 어려운데 ㅜ ㅜ
읽으시고 뭐가 문제인지 아실런지;;;
나름대로 정리하자면, 콘텐츠가 길어서 1,2 페이지 탭을 위 아래에 다 넣고 싶은데..
위에 있는 탭은 지금 코딩으로 잘 움직이는데 밑에다 같은 내용을 넣으면 밑에건
탭이 안먹어요 ㅠ ㅠ 왜이럴까요?? 뭘 더 추가로 써 넣어야 할까요?;;
답변 4
<div class="txtcont clear">
<ul class="tab pagelink">
<li class="select">1</li>
<li class="lastchild">2</li>
</ul>
<div class="content"><p>content1</p></div>
<div class="content disnon"><p>content2</p></div>
<ul class="tab pagelink">
<li class="select">1</li>
<li class="lastchild">2</li>
</ul>
</div>
<script>
$(function() {
$(".tab li").click(function() {
var uls = $("ul").size();
var num = $(".tab li").index(this);
var n_idx = num >= uls ? num - uls : num;
$(".content").addClass('disnon');
$(".content").eq(n_idx).removeClass('disnon');
$(".tab li").removeClass('select');
$(".tab li:nth-child(" + (n_idx + 1) + ")").addClass('select');
});
});
</script>
이렇게 해보세요.
답변 감사드립니다..
근데 밑에 메뉴가 잘 안움직이네요 ㅠ ㅠ
두번째 페이지가 안나타나요 ㅠ
저라면 코드를 이렇게 짜겠습니다.
<div class="txtcont clear">
<ul id="tab" class="pagelink">
<li class="select">1</li>
<li class="lastchild">2</li>
</ul>
<div class="content">
<p>content1</p>
</div>
<div class="content disnon">
<p>content2</p>
</div>
<ul id="tab2" class="pagelink">
<li class="select">1</li>
<li class="lastchild">2</li>
</ul>
</div>
<script>
$(function() {
var $tab1 = $("#tab > li"),
$tab2 = $("#tab2 > li");
$tab1.click(function() {
var num = $tab1.index(this);
$(".content").addClass('disnon');
$(".content").eq(num).removeClass('disnon');
$tab1.add($tab2).removeClass('select');
$(this).add($tab2.eq(num)).addClass('select');
$(window).scrollTop($tab1.offset().top);
});
$tab2.click(function() {
var num = $tab2.index(this);
$tab1.eq(num).trigger("click");
});
});
</script>
똑같은 탭을 아래쪽에 하나 더 만들고 싶다는 건가요?
<ul id="tab" class="pagelink">
id="tab" <= id값이 중복되어서 그런 듯..
id값이랑 class이름 바꿔서 추가하고 스크립트 바꿔보세요~
답변 감사합니다. 말씀대로 해봤는데...
콘텐츠 맨밑에서 2페이지 누르면 그대로 밑에 있는 상태인데... ㅠ ㅠ
2페이지 눌렀을 때 화면 맨 위로 올라가는 방법은 없나요?
jquery 클릭함수 안에
$(window).scrollTop(0); 이거 추가해보세요~
네 요런식으로 하고 싶은데용 ㅠㅠ
대충... 그림으로 치자면;; ㅠ ㅠ
