스크립트 탭 질문 입니다.
본문
<script type="text/javascript" src="https://aaa.php"></script> 란 문서를 index 페이지에 불러왔습니다.
위 스크립트의 페이지는 잘 출력이 됩니다.
위 페이지스크립트를 5개정도 탭으로 만들어 인덱스 화면에서 탭으로 클릭해서 페이지를 보여주고 싶습니다...
답변 2
안녕하세요.
5개 정도로해서 제이쿼리를 활용한 탭메뉴 예제입니다.
선행조건 : jquery
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
SCRIPT
$(function () {
$(".tab_content").hide();
$(".tab_content:first").show();
$("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()
});
});
CSS (사용용도에 맞게 변경하세요.)
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;
}
HTML
<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 -->
<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 -->
</div>
</div>
결과물
!-->!-->!-->!-->
답변을 작성하시기 전에 로그인 해주세요.