AWS AWS 디딤 클라우드

알림톡 통합메시징(알림톡)

이니톡 결제 이니톡(알림톡) 결제!

일본결제지원 일본결제지원!

이전 목록 다음
채택완료

탭메뉴에 구분선이 있었으면 좋겠습니다!

그그그누누
프로필 보기이 회원 글보기이 회원의 댓글보기
 2019-02-21 (목) 17:50:26 3,875

안녕하세요 탭메뉴에 box선을 추가하고싶어서 질문드립니다!

탭메뉴에 지금 구분박스? 가 없는상태인데 1028775886_1550738642.9904.png

너무덩그러니 버튼만 있어서

1028775886_1550738695.6787.png

이런식으로 탭과 메뉴칸이 네모로 구분지어졌으면 좋겠는데 어떤 코드를 추가해야할까요?

밑에 코드는 현재 css파일에 탭메뉴부분의 코드입니당

Copy 
#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;
}

아! 그리고 크롬에서는 저 탭메뉴 버튼을 눌러도 작동이 안돼요! 익스플로러에서는 되는데 크롬에서는 안돼는이유가 궁금합니다ㅠㅠ

url: http://dajo.cafe24.com/

그누보드5 탭메뉴
|

답변 2개 / 댓글 2개

채택된 답변
+20 포인트
볼볼피드
프로필 보기이 회원 글보기이 회원의 댓글보기
 2019-02-21 (목) 18:52:45

css만 올려져있고 탭 소스는 없어서정확히 알 수 없지만

Copy 
ul.tabs li{
    background: none;
    color: #222;
    display: inline-block;
    padding: 10px 15px;
    cursor: pointer;
    border:1px solid #ddd; //탭 부분 테두리 추가
}

아마 저 부분이 탭 부분이신거 같은데 이런식으로 하시면 될 것 같습니다

답변에 대한 댓글 1개

그그누누
프로필 보기이 회원 글보기이 회원의 댓글보기
 2019-02-22 (금) 09:56:29
맞습니다!! 저 코드를 넣었더니 탭에 테두리가 생겼습니다ㅎㅎ 감사합니다

탭 소스는

[code]
<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>
[/code]

이 코드를 말씀하시는 것이 맞나요? ㅎㅎ
sinbi
프로필 보기이 회원 글보기이 회원의 댓글보기
 2019-02-21 (목) 18:11:16

탭 소스가 있는 좌표를 남겨보세요.

위 링크엔 탭이 안 보이는뎅...

1.

선택자 위치 알아낸 후,

https://homzzang.com/b/css-251

2.

테두리 주시면 되세요.

https://homzzang.com/b/css-39

답변에 대한 댓글 1개

그그누누
프로필 보기이 회원 글보기이 회원의 댓글보기
 2019-02-22 (금) 09:54:13
감사합니다!! ㅎㅎ 선택자 위치 알아내는 방법 처음알았습니다 앞으로 요긴하게 쓰겠습니다^^
탭소스는

[code]
<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>

[/code]

이 코드를 말씀하시는 것이 맞나요?? ㅎㅎ

답변을 작성하려면 로그인이 필요합니다.