탭메뉴 첫번째페이지 항상 열려 있게 하는방법 문의좀 드립니다..ㅠㅠ 채택완료
</strong></p>
<p><style></p>
<p>
</p>
<p>.container_box{</p>
<p> width: 100%;</p>
<p> margin-top:10px;</p>
<p> background-color: #fff;</p>
<p> padding: 0px;</p>
<p> box-shadow: 0 2px 16px rgba(0,0,0,.1);</p>
<p> border-radius: 20px;</p>
<p>}</p>
<p>.tab_box{</p>
<p> width: 100%;</p>
<p> display: flex;</p>
<p> justify-content: space-around;</p>
<p> align-items: center;</p>
<p> border-bottom: 2px solid rgba(229,229,229);</p>
<p> font-size: 12px;</p>
<p> font-weight: 600;</p>
<p> position: relative;</p>
<p> }</p>
<p> .tab_box .tab_btn{</p>
<p> font-size: 12px;</p>
<p> font-weight: 600;</p>
<p> color: #000;</p>
<p> background: none;</p>
<p> border: 1px solid rgba(229,229,229);;</p>
<p> padding: 18px;</p>
<p> cursor: pointer;</p>
<p> }</p>
<p> .tab_box .tab_btn.active{</p>
<p> color: #0070bd;</p>
<p> }</p>
<p> .content_box{</p>
<p> padding: 5px;</p>
<p> }</p>
<p> .content_box .content{</p>
<p> display: none;</p>
<p> }</p>
<p> .content_box .content.active{</p>
<p> display: block;</p>
<p> }</p>
<p> .content_box .content h2{</p>
<p> text-align: center;</p>
<p> margin-bottom: 10px;</p>
<p> }</p>
<p> .content_box .content p{</p>
<p> text-align: center;</p>
<p> }</p>
<p> .line{</p>
<p> position: absolute;</p>
<p> top: 50px;</p>
<p> left: 0px;</p>
<p> width: 100%;</p>
<p> height: 5px;</p>
<p> background-color: #0070bd;</p>
<p> border-radius: 10px;</p>
<p> }</p>
<p>.content_box .content:nth-of-type(1) p{</p>
<p> display: block; </p>
<p>}</p>
<p>.content_box .content:nth-of-type(1) h2{</p>
<p> background-color: #fff;</p>
<p>}</p>
<p></style></p>
<p><body></p>
<p><div class="container_box"></p>
<p> <div class="tab_box"></p>
<p> <button class="tab_btn"></button></p>
<p> <button class="tab_btn"></button></p>
<p> <div class="line"></div></p>
<p> </div></p>
<p> </p>
<p> <div class="content_box"></p>
<p> <div class="content"></p>
<p> <p></p>
<p> </p></p>
<p> </div></p>
<p> </p>
<p> <div class="content_box"></p>
<p> <div class="content"></p>
<p> <p></p>
<p> </p></p>
<p> </div></p>
<p> </p>
<p> </div></p>
<p></div></p>
<p> <script></p>
<p> const tabs= document.querySelectorAll('.tab_btn');</p>
<p> const all_content= document.querySelectorAll('.content');</p>
<p> </p>
<p> tabs.forEach((tab, index)=>{</p>
<p> tab.addEventListener('click', ()=>{</p>
<p> tabs.forEach(tab=>{tab.classList.remove('active')});</p>
<p> tab.classList.add('active');</p>
<p> all_content.forEach(content=>{content.classList.remove('active')});</p>
<p> all_content[index].classList.add('active');</p>
<p> })</p>
<p> })</p>
<p><strong>
이코드를 이용해서 탭메뉴를 사용중인데 사이트접속시 첫번째 페이지는 항상 열려있게 하고 싶은데 클릭을해야지만 탭메뉴가 보여지고 사이트 접속시에는 탭메뉴가 닫혀 있어서 보기가 안좋아서 수정을 할려고하는데 어떤부분을 추가해 줘야 하는지 고수님들 답변좀 부탁드립니다..ㅠㅠㅠ
답변 3개
~~~~
all_content[index].classList.add('active');
})
if( index ==0) tab.click(); //<====자동 클릭
})
댓글을 작성하려면 로그인이 필요합니다.
</p>
<p><style></p>
<p>
.container_box{
width: 100%;
margin-top:10px;
background-color: #fff;
padding: 0px;
box-shadow: 0 2px 16px rgba(0,0,0,.1);
border-radius: 20px;
}
.tab_box{
width: 100%;
display: flex;
justify-content: space-around;
align-items: center;
border-bottom: 2px solid rgba(229,229,229);
font-size: 12px;
font-weight: 600;
position: relative;
}
.tab_box .tab_btn{
font-size: 12px;
font-weight: 600;
color: #000;
background: none;
border: 1px solid rgba(229,229,229);;
padding: 18px;
cursor: pointer;
}
.tab_box .tab_btn.active{
color: #0070bd;
}
.content_box{
padding: 5px;
}
.content_box .content{
display: none;
}
.content_box .content.active{
display: block;
}
.content_box .content h2{
text-align: center;
margin-bottom: 10px;
}
.content_box .content p{
text-align: center;
}
.line{
position: absolute;
top: 50px;
left: 0px;
width: 100%;
height: 5px;
background-color: #0070bd;
border-radius: 10px;
}
.content_box .content:nth-of-type(1) p{
display: block;
}
.content_box .content:nth-of-type(1) h2{
background-color: #fff;
}
</style>
<body>
<div class="container_box">
<div class="tab_box">
<button class="tab_btn active">btn 1</button>
<button class="tab_btn">btn 2</button>
<div class="line"></div>
</div>
<div class="content_box">
<div class="content active">
<p>content 1
</p>
</div>
<!-- <div class="content_box"> -->
<div class="content">
<p>content 2
</p>
</div>
</div>
</div>
<script>
const tabs= document.querySelectorAll('.tab_btn');
const all_content= document.querySelectorAll('.content');
tabs.forEach((tab, index)=>{
tab.addEventListener('click', ()=>{
tabs.forEach(tab=>{tab.classList.remove('active')});
tab.classList.add('active');
all_content.forEach(content=>{content.classList.remove('active')});
all_content[index].classList.add('active');
})
})
</script></p>
<p>댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인