스크립트 탭 질문 입니다. 채택완료
사진가
6년 전
조회 2,523
<script type="text/javascript" src="https://aaa.php"></script> 란 문서를 index 페이지에 불러왔습니다.
위 스크립트의 페이지는 잘 출력이 됩니다.
위 페이지스크립트를 5개정도 탭으로 만들어 인덱스 화면에서 탭으로 클릭해서 페이지를 보여주고 싶습니다...
댓글을 작성하려면 로그인이 필요합니다.
답변 2개
채택된 답변
+20 포인트
댓글을 작성하려면 로그인이 필요합니다.
6년 전
안녕하세요.
5개 정도로해서 제이쿼리를 활용한 탭메뉴 예제입니다.
선행조건 : jquery
</p>
<p><script src="<a href="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>" target="_blank" rel="noopener noreferrer">https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script></a></p>
<p>
SCRIPT
$(function () {
$(".tab_content").hide();
$(".tab_content:first").show();</p>
<p> $("ul.tabs li").click(function () {
$("ul.tabs li").removeClass("active").css("color", "#333");
$(this).addClass("active").css("color", "darkred");
$(".tab_content").hide()
var activeTab = $(this).attr("rel");
$("#" + activeTab).fadeIn()
});
});</p>
<p>
CSS (사용용도에 맞게 변경하세요.)
</p>
<p>ul.tabs {
margin: 0;
padding: 0;
float: left;
list-style: none;
height: 40px;
border-bottom: 0px solid #eee;
border-left: 1px solid #eee;
width: 100%;
font-family:"dotum";
font-size:12px;
}
ul.tabs li {
float: left;
text-align:center;
cursor: pointer;
width:100px;
height: 40px;
line-height: 40px;
border: 1px solid #eee;
border-left: none;
font-weight: bold;
background: #fafafa;
overflow: hidden;
position: relative;
}
ul.tabs li.active {
background: #FFFFFF;
border-bottom: 1px solid #FFFFFF;
}
.tab_container {
border: 1px solid #eee;
border-top: none;
clear: both;
float: left;
width: 504px;
background: #FFFFFF;
}
.tab_content {
padding: 5px;
font-size: 12px;
display: none;
}
.tab_container .tab_content ul {
width:505px;
margin:0px;
padding:0px;
}
.tab_container .tab_content ul li {
padding:5px;
list-style:none
}
#container {
width: 505px;
margin: 0 auto;
}</p>
<p>
HTML
</p>
<p><div id="container">
<!-- #tab menu -->
<ul class="tabs">
<li class="active" rel="tab1">탭01</li>
<li rel="tab2">탭02</li>
<li rel="tab3">탭03</li>
<li rel="tab4">탭04</li>
<li rel="tab5">탭05</li>
</ul>
<!-- #tab menu --></p>
<p> <div class="tab_container">
<!-- #tab1 -->
<div id="tab1" class="tab_content">
<ul>
<li><a href="#">탭01 내용</a></li>
</ul>
</div>
<!-- #tab1 -->
<!-- #tab2 -->
<div id="tab2" class="tab_content">
<ul>
<li><a href="#">탭02 내용</a></li>
</ul>
</div>
<!-- #tab2 -->
<!-- #tab3 -->
<div id="tab3" class="tab_content">
<ul>
<li><a href="#">탭03 내용</a></li>
</ul>
</div>
<!-- #tab3 -->
<!-- #tab4 -->
<div id="tab4" class="tab_content">
<ul>
<li><a href="#">탭04 내용</a></li>
</ul>
</div>
<!-- #tab4 -->
<!-- #tab5 -->
<div id="tab5" class="tab_content">
<ul>
<li><a href="#">탭05 내용</a></li>
</ul>
</div>
<!-- #tab5 --></p>
<p> </div></p>
<p></div></p>
<p>
결과물
로그인 후 평가할 수 있습니다
답변에 대한 댓글 3개
�
사진가
6년 전
감사합니다!!! 정말 감사합니다!!!! 친절하고 정확한 설명 답변 정말 감사드립니다!!.
�
펄스나인
6년 전
도움이 되셨다니 다행입니다! :D
h
heaven808
4년 전
저도 찾고 있던 소스입니다~ 정말 큰 도움 되었습니다 감사합니다!
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인