다양한 탭메뉴 소스 > 기타팁(프로그램)

• 목록

• 페이스북 공유
• 트위터 공유

안녕하십니까?

유토하우스 유토맨입니다

*예시1

<!-- 랜덤노출 탭 -->

<ul class="tab_btn">

<li>탭버튼1</li>

<li>탭버튼2</li>

<li>탭버튼3</li>

</ul>

<div class="tab_con">

    <div id="c1">

<h3>내용1</h3> 

    탭내용1 

    </div>

    <div id="c2">

<h3>내용2</h3>

탭내용2

</div>

    <div id="c3">

<h3>내용3</h3>

    탭내용3

    </div>

</div>

<script>

var count = $('.tab_btn li').length;//탭이 몇개인지 계산

idx = Math.floor(Math.random() * count);//랜덤숫자 출력

changeTab(idx);//페이지로드시 초기 탭교체

//탭클릭시 

$('.tab_btn li').click(function(){

    idx = $(this).index();

    changeTab(idx);

});

//탭교체 함수

function changeTab(idx) {

    $('.tab_btn li[class=selected]').removeClass('selected');//선택표시를 제거

    $('.tab_btn li').eq(idx).addClass('selected');//새로운 탭에 선택표시 추가

    $('.tab_con div').fadeOut();//기존 탭내용 제거

    $('#c'+(idx+1)).fadeIn();//새로운 탭 내용 보이기

    $('.tab_con').css('height',$('#c'+(idx+1)).height()+40+'px');//콘텐츠 박스 크기를 재설정, CSS만으로 하는 방법 없나?

}

</script>

<style>

ul.tab_btn {list-style: none; font-size: 0.9em;  text-align: center;}

.tab_btn li {float: left; width: 90px; border: 1px solid #777; padding: 5px;}

.tab_btn li:hover {cursor: pointer;} 

div.tab_con {clear: both; float:none; width: 500px; min-height: 100%; border:1px solid #888; position: relative; overflow-y: hidden;}

.tab_con div {display: none; padding: 20px; position: absolute;}

.selected {background-color: #111; color: #fff;}

</style>

<!-- 랜덤노출 탭 -->

*예시2 

<!-- 탭매뉴 -->

<!-- 검색창 안 랜덤 -->

<script>

window.onload = function() {

    var str = ["aaa", "bb", "cc", "dd"];

    var n = Math.floor(Math.random() * str.length);

    document.getElementById("test").value = str[n];

}

</script>

<textarea name="test" id="test"></textarea>

<!-- 검색창 안 랜덤 -->

<style>

#uto_tab {border:1px solid #eee}

#uto_tab ul li {float:left;width:33.3%;cursor:pointer;border-bottom:1px solid #000;padding:5px;text-align:center;font-weight:300;line-height:20px}

#uto_tab #uto_tab2 {border-right:1px solid #eee;border-left:1px solid #eee}

.uto_tab_clbg {background:#4e6e8b;color:#fff;border-right:1px solid #eee}

</style>

<div id="uto_tab">

   <h2></h2>                    

<ul>

          <li id="uto_tab1" class="port_back">질문답변</li>

          <li id="uto_tab2">자유게시판</li>

          <li id="uto_tab3">웹이미지</li>

       </ul>

       <div class="rf tab_sub1">11</div>

       <div class="rm tab_sub2">22</div>

       <div class="rm tab_sub3">33</div>

</div> 

<script type="text/javascript">

$(document).ready(function() {

//초기 오픈

$(".tab_sub1").show();

$(".tab_sub2").hide();

$(".tab_sub3").hide();

$("#uto_tab1").addClass("uto_tab_clbg");

 //클릭시 동작

$("#uto_tab1").click(function() {

$(".tab_sub1").show();

$(".tab_sub2,.tab_sub3").hide();

$("#uto_tab1").addClass("port_back");

$("#uto_tab2,#uto_tab3").removeClass("port_back");

$("#uto_tab1").addClass("uto_tab_clbg");

 $("#uto_tab2,#uto_tab3").removeClass("uto_tab_clbg");

});

$("#uto_tab2").click(function() {

 $(".tab_sub2").show();

 $(".tab_sub1,.tab_sub3").hide();

 $("#uto_tab2").addClass("port_back");

 $("#uto_tab1,#uto_tab3").removeClass("port_back");

 $("#uto_tab2").addClass("uto_tab_clbg");

 $("#uto_tab1,#uto_tab3").removeClass("uto_tab_clbg");

});

$("#uto_tab3").click(function() {

$(".tab_sub3").show();

$(".tab_sub1,.tab_sub2").hide();

$("#uto_tab3").addClass("port_back");

 $("#uto_tab1,#uto_tab2").removeClass("port_back");

$("#uto_tab3").addClass("uto_tab_clbg");

$("#uto_tab1,#uto_tab2").removeClass("uto_tab_clbg");

 });

});

*예시3 

$(function () {

  $("#TAB_A").rumiTab({

    selectorCl  : "ul.rumitab li",

    interValtime: 3000, // 3초마다

    auTo        : true, // 자동으로 다음 탭 이동

    starttabNo  : 0, // 첫번째 탭부터 시작

    autoDirection: "random", // 탭이동은 랜덤

    tabAlign    : "left", // 탭정렬은 오른쪽

    mEvent      : "mouseenter", // 탭위에 마우스오버시 해당 탭이 선택되며, 자동이동은 일시 중지됩니다.

    containerH  : 300 // 탭 박스의 높이 px

  });

});

</script>

<!-- 탭매뉴 -->

<link rel="stylesheet" href="/css/rumiTab.css"> <!-- 탭 CSS (필수) -->

<script src="/js/jquery.rumiTab.js"></script> <!-- 탭 Js (필수) -->

---> 스크립트 소스를 첨부파일에서 다운하세요

<div id="TAB_A" class="rumitab_box">

    <ul class="rumitab">

        <li rel="A_tab1">공지사항</li>

        <li rel="A_tab2">최근본글</li>

        <li rel="A_tab3">A-세번째</li>

        <li rel="A_tab4">A-네번째</li>

        <li rel="A_tab5">A-다섯번째</li>

        <li rel="A_tab6">A-여섯번째</li>

        <li rel="A_tab7">A-일곱번째</li>

    </ul>

    <div class="rumitab_container">

        <div id="A_tab1" class="rumitab_content">111</div>

        <div id="A_tab2" class="rumitab_content">A그룹 두번째 탭</div>

        <div id="A_tab3" class="rumitab_content">A그룹 세번째 탭</div>

        <div id="A_tab4" class="rumitab_content">A그룹 네번째 탭</div>

        <div id="A_tab5" class="rumitab_content">A그룹 다섯번째 탭</div>

        <div id="A_tab6" class="rumitab_content">A그룹 여섯번째 탭</div>

        <div id="A_tab7" class="rumitab_content">A그룹 일곱번째 탭</div>

    </div>

</div>