서브메뉴 관련 질문 드립니다.
본문
안녕하세요
아래 처럼 코딩을 하였는데요
문제는 메뉴가 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>
친절하게 답변 해주셔서 감사 드립니다.
답변을 작성하시기 전에 로그인 해주세요.
