jQuery 관련 팁을 공유하는 곳입니다. [가입을 하셔야 다운로드가 가능합니다.]
  • 웹미니 한줄 전광판 영역 입니다.
글 수 24

0

조회 수 : 150 신고 : 0

profile
작성자 : title: [ani]깜빡이는 표정빽짱구
포인트 : 56575 | 레벨 : 25
미리보기 :  

html 소스

 

<div id="container">

    <ul class="tabs">

        <li class="active" rel="tab1">메뉴1</li>

        <li rel="tab2">메뉴2</li>

        <li rel="tab3">메뉴3</li>

    </ul>

    <div class="tab_container">

        <div id="tab1" class="tab_content">

            <ul>

                <li><a href="#">첫번째 리스트1</a></li>

                <li><a href="#">첫번째 리스트2</a></li>

            </ul>

        </div>

        <!-- #tab1 -->

        <div id="tab2" class="tab_content">두번째 내용</div>

        <!-- #tab2 -->

        <div id="tab3" class="tab_content">세번째 내용</div>

        <!-- #tab3 -->

    </div>

    <!-- .tab_container -->

</div>

<!-- #container -->

 

srcipt 소스

 

$(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","font-weight": "bolder"});

        $(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: 32px;

    border-bottom: 1px 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:82px;

    height: 31px;

    line-height: 31px;

    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: 248px;

    background: #FFFFFF;

}

.tab_content {

    padding: 5px;

    font-size: 12px;

    display: none;

}

.tab_container .tab_content ul {

    width:100%;

    margin:0px;

    padding:0px;

}

.tab_container .tab_content ul li {

    padding:5px;

    list-style:none

}

;

 #container {

    width: 249px;

    margin: 0 auto;

}

태그
profile 글쓴이 빽짱구

단점이 없는 사람은 장점도 거의 없다 - 에이브러햄 링컨

엮인글 :
https://www.webmini.net/jquery/636494/375/trackback
소중한 댓글 부탁드립니다.
추천수 10단위당 메달이 1개씩 노출되고, 추천수에 따라 배경색이 변하며, 일정수의 추천수를 받을시 BEST 아이콘이 붙게됩니다.
추천수에 따른 배경색 보기 본문으로 바로가기
  • 추천수 50개이상
  • 추천수 30개이상
  • 추천수 20개이상
  • 추천수 10개이상
  • 추천수 3개이상
닫기

첫번째 댓글을 남겨주세요!

List of Articles
번호 제목 글쓴이 날짜 추천 수 조회 수
24 버튼 클릭시 원하는 곳으로 이동하기(스크롤 위치 기억) title: [ani]깜빡이는 표정빽짱구 2019-03-29   162
23 버튼과 같은 이름의 레이어 띄우기 title: [ani]깜빡이는 표정빽짱구 2019-03-26   124
22 ajax로 호출시 jquery 실행이 안될때 title: [ani]깜빡이는 표정빽짱구 2019-01-04   129
21 jquery 탭메뉴 title: [ani]깜빡이는 표정빽짱구 2019-01-02   150
20 가로사이즈 구하기 title: [ani]깜빡이는 표정빽짱구 2018-11-06   115
19 jquery - 이미지 체크박스, 라디오 버튼 title: [ani]깜빡이는 표정빽짱구 2018-10-16   168
18 본문글 집중모드 효과 file [1] title: [ani]깜빡이는 표정빽짱구 2018-10-09   238
17 스크롤 고정형 퀵배너 title: [ani]깜빡이는 표정빽짱구 2018-09-07   143
16 버튼 클릭시 원하는 곳으로 부드럽게 이동 title: [ani]깜빡이는 표정빽짱구 2018-09-07   129
15 jquery 토글 기능 title: [ani]깜빡이는 표정빽짱구 2018-09-06   96
14 해당 영역 높이값 자동으로 가져오기 title: [ani]깜빡이는 표정빽짱구 2016-04-27   201
13 해상도별로 CSS호출하기 title: [ani]깜빡이는 표정빽짱구 2015-10-14   748
12 iscroll 사용시 동적일때 문제 title: [ani]깜빡이는 표정빽짱구 2014-02-20   3598
11 [스크랩] jQuery 팁 & 튜토리얼 title: 새싹사뎅이 2014-01-14   2512
10 제이쿼리 모바일(jquery mobile) 샘플사이트 및 데모 title: [ani]깜빡이는 표정빽짱구 2013-01-29 1 6898
9 버튼이나 텍스트 링크 클릭시 원하는곳으로 부드럽게 이동하기 file [1] title: [ani]깜빡이는 표정빽짱구 2012-10-22 2 5234
8 제이쿼리 및 CSS3,HTML5 관련 튜토리얼입니다. title: [ani]방울UI 2012-10-11   3417
7 jQuery 로 레이어 드래그 하기 title: [ani]깜빡이는 표정빽짱구 2012-09-07   3391
6 jQuery로 파일첨부버튼 이미지로 꾸미기 file title: [ani]깜빡이는 표정빽짱구 2012-09-07   4476
5 jQuery 제이쿼리로 셀렉트 박스 꾸미기 file title: [ani]깜빡이는 표정빽짱구 2012-09-06 1 5561