채택완료
탭메뉴 첫번째페이지 항상 열려 있게 하는방법 문의좀 드립니다..ㅠㅠ
Copy
<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개
채택된 답변
+20 포인트
2024-10-05 (토) 20:55:45
~~~~
all_content[index].classList.add('active');
})
if( index ==0) tab.click(); //<====자동 클릭
})
2024-10-05 (토) 20:49:39
Copy
<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>
비버팩토리클래스를 줘서 open 으로 디스플레이 블록, 인라인블록 하세요.
그리고 php로 할수 있으면 조건문줘서 클래스 추가해보세요
예시는 이렇습니다.
if($co_id = "test") { echo "class='open'"; }
답변을 작성하려면 로그인이 필요합니다.