탭메뉴 첫번째페이지 항상 열려 있게 하는방법 문의좀 드립니다..ㅠㅠ
본문
<style>
.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"></button>
<button class="tab_btn"></button>
<div class="line"></div>
</div>
<div class="content_box">
<div class="content">
<p>
</p>
</div>
<div class="content_box">
<div class="content">
<p>
</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');
})
})
이코드를 이용해서 탭메뉴를 사용중인데 사이트접속시 첫번째 페이지는 항상 열려있게 하고 싶은데 클릭을해야지만 탭메뉴가 보여지고 사이트 접속시에는 탭메뉴가 닫혀 있어서 보기가 안좋아서 수정을 할려고하는데 어떤부분을 추가해 줘야 하는지 고수님들 답변좀 부탁드립니다..ㅠㅠㅠ
답변 3
클래스를 줘서 open 으로 디스플레이 블록, 인라인블록 하세요.
그리고 php로 할수 있으면 조건문줘서 클래스 추가해보세요
예시는 이렇습니다.
if($co_id = "test") { echo "class='open'"; }
<style>
.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>
~~~~
all_content[index].classList.add('active');
})
if( index ==0) tab.click(); //<====자동 클릭
})
답변을 작성하시기 전에 로그인 해주세요.