Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE HTML>
<html lang="ko">
<head>
<meta charset="euc-kr">
<meta name = "format-detection" content = "telephone=no">
<title> 이중탭을 하나의 스크립트로 처리하기 </title>
 
<style>
/* reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,textarea,p,blockquote,th,td,input,select,textarea,button {margin:0;padding:0}
fieldset,img {border:0 none}
dl,ul,ol,menu,li {list-style:none}
blockquote, q {quotes:none}
blockquote:before, blockquote:after,q:before, q:after {content:'';content:none}
input,select,textarea,button {vertical-align:middle}
button {border:0 none;background-color:transparent;cursor:pointer}
html {height:100%}
body {height:100%;padding:20px;background-color:#373a3f;font-size:12px;line-height:1.5;font-family:'Malgun Gothic','맑은고딕',sans-serif;color:#333}
a {color:#000;text-decoration:none}
address,caption,cite,code,dfn,em,var {font-style:normal;font-weight:normal}
table {border-collapse: collapse;border-spacing:0}
img {vertical-align:top}
 
.fc_p1 {color:#00e0d2}
 
.comm_tab1 {display:block;clear:both;*zoom:1;margin-top:20px;}
.comm_tab1:after {display:block;height:0;content:".";font-size:0;visibility:hidden;clear:both}
.comm_tab1>.tab_menu>li {float:left;margin-right:7px;text-align:center;font-size:16px;border-radius:7px;border:1px solid #242424;letter-spacing:-1px;-webkit-box-shadow:0px 0 7px rgba(0, 0, 0, 0.7);}
.comm_tab1>.tab_menu .tit {display:block;height:35px;padding:4px 30px 0;font-weight:bold;color:#fff;border-top-right-radius:7px;border-top-left-radius:7px;background-color:#4c5057;cursor:pointer;-webkit-box-shadow:inset 0 0 3px rgba(225, 225, 225, 0.5)}
.comm_tab1>.tab_menu .on {position:relative;height:30px}
.comm_tab1>.tab_menu .on .tit {height:32px;color:#00e1d3;border-bottom:2px solid #4c5057;-webkit-box-shadow:inset 0 1px 2px rgba(225, 225, 225, 0.3)}
.comm_tab1>.tab_cont {float:left;width:100%;clear:both;margin-top:-7px;border-radius:7px;-webkit-box-shadow:0px 0 7px rgba(0, 0, 0, 0.7);color:#fff}
.comm_tab1>.tab_cont>.cont {padding:20px;background-color:#4c5057;border:1px solid #242424;border-radius:7px;-webkit-box-shadow:inset 0 0 3px rgba(225, 225, 225, 0.5)}
.comm_tab1>.tab_cont>.cont:first-child {border-top-left-radius:0}
.comm_tab1 .comm_refer {margin:5px 0 18px 15px}
 
.comm_tab2 {display:block;clear:both;*zoom:1}
.comm_tab2:after {display:block;height:0;content:".";font-size:0;visibility:hidden;clear:both}
.comm_tab2>.tab_menu {float:right}
.comm_tab2>.tab_menu>li {float:left;text-align:center;font-size:13px;white-space:nowrap;margin-left:4px;}
.comm_tab2>.tab_menu .tit {display:block;height:26px;padding:5px 20px;font-weight:bold;color:#45494f;border-top-right-radius:7px;border-top-left-radius:7px;border:1px solid #242424;background-color:#c5c5c5;cursor:pointer;-webkit-box-shadow:0px -1px 3px rgba(0, 0, 0, 0.3)}
.comm_tab2>.tab_menu .on {position:relative}
.comm_tab2>.tab_menu .on .tit {height:20px;background-color:#fff;border-bottom:1px dashed #4b4f56}
.comm_tab2>.tab_cont {float:left;width:100%;clear:both;margin-top:-7px}
.comm_tab2>.tab_cont .cont {padding:25px;font-size:14px;color:#666;background-color:#fff;border:1px solid #242424;border-radius:7px;-webkit-box-shadow:0px 0px 5px rgba(0, 0, 0, 0.5);letter-spacing:-1px}
.comm_tab2>.tab_cont>.cont:last-child {border-top-right-radius:0}
</style>
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(document).ready (function () {
    //탭(ul) onoff
    $('.jq_tabonoff>.jq_cont').children().css('display', 'none');
    $('.jq_tabonoff>.jq_cont div:first-child').css('display', 'block');
    $('.jq_tabonoff>.jq_tab li:first-child').addClass('on');
    $('.jq_tabonoff').delegate('.jq_tab>li', 'click', function() {
        var index = $(this).parent().children().index(this);
        $(this).siblings().removeClass();
        $(this).addClass('on');
        $(this).parent().next('.jq_cont').children().hide().eq(index).show();
    });
});
</script>
</head>
<body>
 
            <div class="jq_tabonoff comm_tab1">
                <ul class="jq_tab tab_menu">
                    <li><a href="javascript:;" class="tit">심리학 이론</a></li>
                    <li><a href="javascript:;" class="tit">유래와 역사</a></li>
                    <li><a href="javascript:;" class="tit">박사의 말</a></li>
                </ul>
                <div class="jq_cont tab_cont">
                    <!-- //탭1 -->
                    <div class="cont">
                        <p>혈액형 관련 대표적인 심리학 이론들</p><br>
                        <div class="jq_tabonoff comm_tab2">
                            <ul class="jq_tab tab_menu">
                                <li><a href="javascript:;" class="tit">1. 확증편향</a></li>
                                <li><a href="javascript:;" class="tit">2. 바넘효과</a></li>
                                <li><a href="javascript:;" class="tit">3. 자기실행적 예언</a></li>
                                <li><a href="javascript:;" class="tit">4. 인지부조화</a></li>
                            </ul>
                            <div class="jq_cont tab_cont">
                                <!-- //탭1-1 -->
                                <div class="cont">
                                    <strong>1. 확증편향 (confirmation bias)</strong><br><br>
                                    <p>자신의 신념과 일치하는 정보들은 쉽게 믿고 받아들이고, 신념과 일치하지 않는 정보는 무시하거나 덜 찾는 경향<br><br>
                                    예: 소심한 사람에게 혈액형을 물어 A형이 아니라고 하면 금방 잊어버리고,<br>
                                    A형이 맞다고 하면 호들갑을 떨며 "맞지? A형일것 같았어."라고 말하는 것.</p>
                                </div>
                                <!-- 탭1-1// -->
 
                                <!-- //탭1-2 -->
                                <div class="cont">
                                    <strong>2. 바넘효과 (Barnum effect)</strong><br><br>
                                    대부분의 사람들이 보편적으로 가지고 있는 성격이나 심리적 특징을<br>
                                    자신만의 고유한 특성으로 여기는 경향.<br><br>
                                    예: "당신은 대체로 싸움을 싫어하지만 때로는 강하게 나갈 때도 있다.", "당신은 기본적으로 외향적인 성격이지만 때때로 소심하거나 내향적인 모습을 보이기도 한다"와 같은
                                    당연한 소리를 자신의 성격이라고 믿는 것.
                                </div>
                                <!-- 탭1-2// -->
 
                                <!-- //탭1-3 -->
                                <div class="cont">
                                    <strong>3. 자기실행적 예언(Self-fulfilling prophecy)</strong><br><br>
                                    자신에 대해 특정한 기대를 갖게 되면, 그러한 기대에 부응하는 쪽으로<br>
                                    변하려고 노력하게 되어, 행동을 그러한 단서에 맞게 바꿔가는 경향.<br><br>
                                    예: 별자리 운세에 나온 "오늘은 좋은 일이 생긴다"라는 말을 보고 기분이 좋아져
                                    실제로도 좋은 하루를 보내게 되는 것.
                                </div>
                                <!-- 탭1-3// -->
 
                                <!-- //탭1-4 -->
                                <div class="cont">
                                    <strong>4. 인지부조화</strong><br><br>
                                    자신의 기존 신념과 인지가 맞지 않게 되었을 때 인지를 신념에 끼워맞추는<br>일종의 극단적 자기 합리화<br><br>
                                    예: B형같지 않은 B형을 보고 "하긴, 저런 B형도 있다더라."라고 말하는 것.
                                </div>
                                <!-- 탭1-4// -->
                            </div>
                        </div>
                    </div>
                    <!-- 탭1// -->
 
                    <!-- //탭2 -->
                    <div class="cont">
                        <p>혈액형 성격유형가설의 유래와 역사</p><br>
                        <div class="jq_tabonoff comm_tab2">
                            <ul class="jq_tab tab_menu">
                                <li><a href="javascript:;" class="tit">1. 유럽의 우생학</a></li>
                                <li><a href="javascript:;" class="tit">2. 나치독일 대량학살</a></li>
                                <li><a href="javascript:;" class="tit">3. 일본의 사이비과학</a></li>
                            </ul>
                            <div class="jq_cont tab_cont">
                                <!-- //탭2-1 -->
                                <div class="cont">
                                    <strong>1. 제국주의시대 유럽의 우생학</strong><br><br>
                                    유럽에는 A형과 O형이 많고 아시아에는 상대적으로 B형과 AB형이 많은 것에 착안,<br>
                                    A형과 O형은 우월한 종자이고 B형과 AB형은 열등한 종자라는 억지이론을 만들기 시작
                                </div>
                                <!-- 탭2-1// -->
 
                                <!-- //탭2-2 -->
                                <div class="cont">
                                    <strong>2. 나치독일 대량학살의 뒷받침</strong><br><br>
                                    나치독일에 의해 유대인 등 대학살의 근거로 사용됨
                                </div>
                                <!-- 탭2-2// -->
 
                                <!-- //탭2-3 -->
                                <div class="cont">
                                    <strong>3. 일본의 사이비과학(pseudoscience)</strong><br><br>
                                    뒷받침되는 증거가 전혀 없어 유럽에서 폐기된 가설을<br>
                                    후루까와 등 일본의 엉터리 과학자가 들여와 나름 살을 붙여서 퍼뜨리기 시작
                                </div>
                                <!-- 탭2-3// -->
                            </div>
                        </div>
                    </div>
                    <!-- 탭2// -->
 
                    <!-- //탭3 -->
                    <div class="cont">
                        <strong>서울백병원 신경정신과 우종민 박사의 말</strong><br><br>
                        <p>사람의 성격에 대해서는 정신과만큼 관심이 많은 과가 없겠지요.<br>
                            그렇지만 정신과 의사들은 혈액형과 성격에 대해서 연구한 적이 거의 없습니다.<br>
                            그 이유는 애당초 연구를 시작해야 될 필요성이나 과학적인 근거가 없기 때문에<br>
                            연구를 안 한 것이지요.
                        </p>
                    </div>
                    <!-- 탭3// -->
                </div>
            </div>
 
 
</body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers