서브메뉴 관련 질문 드립니다.

서브메뉴 관련 질문 드립니다.

QA

서브메뉴 관련 질문 드립니다.

본문

안녕하세요

아래 처럼 코딩을 하였는데요

문제는 메뉴가 3개가 다 아래 보더 값이 먹는 다는 것이 문제 인데요

클릭했을 때만 <li class="click"> 이 나오고 그외 다른 메뉴는 그냥 li만 나오게 하려고 하는데 이건 스크립트로 해야 하나요

혹시 스크립트로 한다고 한다면 혹시 예시 파일이 있을까요 

아니면 더 쉬운 방법이 있는지 궁금 합니다.


<style>
/* Nav */
.tabs nav { text-align: center; padding-bottom:50px; }
@media screen and (max-width: 980px) {
    .tabs {font-size:16px;}
    .tabs nav {padding-bottom:20px;}
    .tabs nav li {}
    .tabs nav ul > .li {padding:0 10px;}
}
.tabs nav ul { position: relative; display: -ms-flexbox; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: flex; margin: 0 auto; padding: 0; list-style: none; -ms-box-orient: horizontal; -ms-box-pack: center; -webkit-flex-flow: row wrap; -moz-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; justify-content: center; background:#f5f5f5; border-left:1px #e5e5e5 solid; border-top:1px #e5e5e5 solid; border-bottom:1px #e5e5e5 solid; }
.tabs nav ul li { position: relative; z-index: 1; display: block; margin: 0; text-align: center; -webkit-flex: 1; -moz-flex: 1; -ms-flex: 1; flex: 1; border-right:1px #e1e1e1 solid; border-bottom:1px #e1e1e1 solid; }
.tabs nav a { position: relative; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 2.5; text-decoration: none; color:#666; }
.tabs nav a span { vertical-align: middle; font-size: 0.75em; }
.tabs nav li.tab-current a { color: #74777b; }
.tabs nav a:hover { color:#ff0000; outline: none; }
.tabs nav .click { color:#ff0000; outline: none; border-bottom:3px #555 solid; }
.tabs nav .click a {color:#ff0000;}
.tabs nav .li { width:50%; }
.tabs-style-underline nav { background: #fff; }
.tabs-style-underline nav a { padding: 0.25em 0 0.5em; border-left: 1px solid #ddd; -webkit-transition: color 0.2s; transition: color 0.2s; }
.tabs-style-underline nav li:last-child a { border-right: 1px solid #ddd; }
.tabs-style-underline nav li a::after { position: absolute; bottom: 0; left: 0; width: 100%; height: 6px; background: #2CC185; content: ''; -webkit-transition: -webkit-transform 0.3s; transition: transform 0.3s; -webkit-transform: translate3d(0,150%,0); transform: translate3d(0,150%,0); }
.tabs-style-underline nav li.tab-current a::after { -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); }
.tabs-style-underline nav a span { font-weight: 700; }
</style>
<div class="tabs">
     <nav>
          <ul>
               <li class="click"><a href="/page/page.01_01.php" target="_self" class="active">인사말 </a></li>
<li class="click"><a href="/page/page.01_02.php" target="_self">기획의도 </a></li>
<li class="click"><a href="/page/page.01_03.php" target="_self">로고/이념 </a></li>                    
                </ul>
            </nav>
        </div>

아래 스크립트를 활용 하면 될 것 같은데 잘 안되어서요


<script>
    $(document).ready(function(){
        $('ul li').click(function(){
            var tab_id = $(this).attr('data-tab');
            $('ul li').removeClass('click');
            $('.tab-content').removeClass('click');
            $(this).addClass('click');
            $("#"+tab_id).addClass('click');
        })
    })
</script>

 

이 질문에 댓글 쓰기 :

답변 3

php로 if문 쓰셔서 해당 페이지이면 class="click" 적용 그렇지 않으면 class를 표시 안되게끔 해주셔야 할 것같습니다.

페이지가 동적 페이지가 아니라 정적인 페이지라 php로 class 표시를 조건에 맞게 처리해 주시면 간단하게 처리가 될듯합니다.

 

혹시 몰라서 스크립트 코드도 남깁니다.

자바스크립트 예제는 그렇습니다..

이코드를 쓰실려면 jquery를 호출하셔야합니다.


$('.tabs>nav>ul>li').click(function(){
    $(this).attr("class","click");
    $(this).siblings().attr("class","");
    //console.log($(this).siblings());
});    

클릭했을 때만 <li class="click"> 이 나오고

==

이 부분이 마우스로 해당 요소를 클릭했을 때라면

https://programacion.tistory.com/96

https://stackoverflow.com/questions/13630229/can-i-have-an-onclick-effect-in-css

이 부분을 참고하셔서 css를 지정해 보세요.

참고해서 활용해 보세요.

 


<style>
.click { border : 1px solid #cccccc; cursor:pointer; padding:5px;  }
</style>
<li class="click">인사말 </li>
<li class="click">기획의도</li>
<li class="click">로고/이념</li>
<script>
cn = document.getElementsByClassName("click");
for (i = 0; i < cn.length; i++) {
    cn[i].mode = i;
    cn[i].onclick = function() {
        for (j = 0; j < cn.length; j++) cn[j].style.border = this.mode == j ? "1px solid #cccccc" : "none";
    }
}
cn[0].onclick();
</script> 
답변을 작성하시기 전에 로그인 해주세요.
전체 88
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT