탭메뉴에 구분선이 있었으면 좋겠습니다!
본문
안녕하세요 탭메뉴에 box선을 추가하고싶어서 질문드립니다!
탭메뉴에 지금 구분박스? 가 없는상태인데 
너무덩그러니 버튼만 있어서
이런식으로 탭과 메뉴칸이 네모로 구분지어졌으면 좋겠는데 어떤 코드를 추가해야할까요?
밑에 코드는 현재 css파일에 탭메뉴부분의 코드입니당
#container {
width:70%;
margin: 1%;
text-align:left;
}
body{
margin-top: 100px;
line-height: 1.6
}
ul.tabs{
margin: 0px;
padding: 0px;
list-style: none;
}
ul.tabs li{
background: none;
color: #222;
display: inline-block;
padding: 10px 15px;
cursor: pointer;
}
ul.tabs li.current{
background: #ffdcfb;
color: #ff000b;
}
.tab-content{
display: none;
background: #ffffff;
padding: 15px;
}
.tab-content.current{
display: inherit;
}
아! 그리고 크롬에서는 저 탭메뉴 버튼을 눌러도 작동이 안돼요! 익스플로러에서는 되는데 크롬에서는 안돼는이유가 궁금합니다ㅠㅠ
답변 2
css만 올려져있고 탭 소스는 없어서정확히 알 수 없지만
ul.tabs li{
background: none;
color: #222;
display: inline-block;
padding: 10px 15px;
cursor: pointer;
border:1px solid #ddd; //탭 부분 테두리 추가
}
아마 저 부분이 탭 부분이신거 같은데 이런식으로 하시면 될 것 같습니다
맞습니다!! 저 코드를 넣었더니 탭에 테두리가 생겼습니다ㅎㅎ 감사합니다
탭 소스는
<section id="rankiss_v_desc">
<h2 style="font-size:0;">제품설명</h2>
<div class="container">
<ul class="tabs">
<li class="tab-link current" data-tab="tab-1">메뉴_하나</li>
<li class="tab-link" data-tab="tab-2">메뉴_둘</li>
<li class="tab-link" data-tab="tab-3">메뉴_셋</li>
</ul>
<div id="tab-1" class="tab-content current">
<p><?php echo $view['wr_content']; ?></p>
</div>
<div id="tab-2" class="tab-content">
<p><?php echo $view['wr_content']; ?></p>
</div>
<div id="tab-3" class="tab-content">
<p><?php echo $view['wr_content']; ?></p>
</div>
</div>
</section>
이 코드를 말씀하시는 것이 맞나요? ㅎㅎ
탭 소스가 있는 좌표를 남겨보세요.
위 링크엔 탭이 안 보이는뎅...
1.
선택자 위치 알아낸 후,
https://homzzang.com/b/css-251
2.
테두리 주시면 되세요.
감사합니다!! ㅎㅎ 선택자 위치 알아내는 방법 처음알았습니다 앞으로 요긴하게 쓰겠습니다^^
탭소스는
<section id="rankiss_v_desc">
<h2 style="font-size:0;">제품설명</h2>
<div class="container">
<ul class="tabs">
<li class="tab-link current" data-tab="tab-1">메뉴_하나</li>
<li class="tab-link" data-tab="tab-2">메뉴_둘</li>
<li class="tab-link" data-tab="tab-3">메뉴_셋</li>
</ul>
<div id="tab-1" class="tab-content current">
<p><?php echo $view['wr_content']; ?></p>
</div>
<div id="tab-2" class="tab-content">
<p><?php echo $view['wr_content']; ?></p>
</div>
<div id="tab-3" class="tab-content">
<p><?php echo $view['wr_content']; ?></p>
</div>
</div>
</section>
이 코드를 말씀하시는 것이 맞나요?? ㅎㅎ
답변을 작성하시기 전에 로그인 해주세요.
