css 문의 드립니다.

css 문의 드립니다.

QA

css 문의 드립니다.

답변 1

본문

사이트 주소 입니다.

 

https://jdcompany.iwinv.net/

 

 

<div class="tab_content">

              <div class="main flex">

                    <input type="radio" name="tabmenu" id="tab01" checked>

                    <label for="tab01">디자인패키지 (기획+디자인)</label>

                    <input type="radio" name="tabmenu" id="tab02">

                    <label for="tab02">올인원패키지<br>(기획+촬영+디자인)</label>

                </div>

 

                <div class="conbox con1">

                    <img src="../img/sec06main1.png" alt="">

                </div>

                <div class="conbox con2">

                    <img src="../img/sec06visu2.png" alt="">

                </div>

            </div>

 

탭 구분 html 입니다.

탭 정렬을 위해 main 이라는 div를 추가하면 탭 작동이 안되고

저걸 빼면 작동이 됩니다.

아래는 css 입니다.

 

.sec06 .conbox{display:none;margin-top:50px;}

 

.sec06 .main input[id="tab01"]:checked ~ .con1{display:block;}

.sec06 .main input[id="tab02"]:checked ~ .con2{display:block;}

 

이렇게 해도 작동이 안되는데 왜 이런걸까요 ㅠㅠ

 

 

 

이 질문에 댓글 쓰기 :

답변 1

div 하나가 추가되어 종속 받는 객체의 위치가 달라져서 그렇습니다.
 

말씀하신 방법으로는 구현이 불가능 합니다.

 

2039255696_1728005554.6583.jpg

 

CSS에서는 하위 객체로 부터 상위 객체를 선택할 수 없습니다.

 

남겨주신 구조 상으로는 불가능합니다, 제이쿼리나 자바스크립트를 이용해서 탭 메뉴를 구현해야 합니다.

도움이 되셨다면 채택 한번 부탁드립니다^^

답변을 작성하시기 전에 로그인 해주세요.
QA 내용 검색
질문등록
전체 127
© SIRSOFT
현재 페이지 제일 처음으로