jquery 도와주세요오..
본문
$(function(){//jQuery 준비
$('.aside_contents').eq(0).show();
$('aside > h4').eq(0).addClass('selected');
$('aside .aside_contents').click(function(){
if(){
$(this).siblings('h4').addClass('selected');
}
else{
}; // if 종결
}).mouseover(function(){$(this).addClass('over');
}).mouseout(function(){$(this).removeClass('over');});
});//jQuery 종료
//-->
css
aside{width:200px;color:#444;position:fixed;z-index:9999;background-color: #212529;opacity:0.8;border-right:2px solid #eee;flex:1;padding:60px 15px 0; height:100%;}
aside h4{padding:5px;font-size:20px;border-bottom:1px solid #fff;}
aside h4.over{background:#2196f3;cursor:pointer;}
aside h4.selected{background:#FFF ;cursor:default; height:40px;}
.b2bInfo{padding:30px;}
.b2bInfo_img{text-align:center; border:2px solid #fff; border-radius:10px;}
.b2bInfo_img img{vertical-align:top;}
.b2bInfo ul li a{color:#fff;}
.aside_contents ul{width:100%;}
.aside_contents ul li a{text-indent:1em;display:block;color:#fff;padding-left:20px;}
.aside_contents ul li:hover{background:#2196f3;color:#fff;}
.bit_wide{padding:10px;}
.aside_contents{padding:10px 0; display: -webkit-flex;display: flex;-webkit-align-items: center;align-items: center;}
.aside_contents ul li{padding:6px 0;}
html
<aside>
<?if( $b2bAuth->chkB2B() ){?>
<div class="b2bInfo">
<ul>
<li>
<a href="../main/login_out.php">로그아웃</a> <span style="color:#858585">|</span>
<a href="../b2b/b2b_edit.php">정보수정</a>
</li>
</ul>
</div>
<?}?>
<h4><span class="bit_wide"><img src="../../images/logo.png" alt="" /></span>홈</h4>
<div class="aside_contents">
<ul>
<li><a href="../main/main_index.php" class="<?=($_SUB_MENU_=="MAIN") ? "active" : "active_none";?>">-홈</a></li>
</ul>
</div>
<h4><span class="bit_wide"><img src="../../images/logo.png" alt="" /></span>정보수정</h4>
<div class="aside_contents">
<ul>
<li><a href="../b2b/b2b_edit.php" class="<?=($_SUB_MENU_=="EDIT") ? "active" : "active_none";?>">-정보수정</a></li>
</ul>
</div>
<h4><span class="bit_wide"><img src="../../images/logo.png" alt="" /></span>뉴스관리</h4>
<div class="aside_contents">
<ul>
<li><a href="../news/news_list.php" class="<?=($_SUB_MENU_=="LIST") ? "active" : "active_none";?>">-뉴스목록</a></li>
<li><a href="../news/news_write.php" class="<?=($_SUB_MENU_=="WRITE") ? "active" : "active_none";?>">-뉴스등록</a></li>
</ul>
</div>
</aside>
이렇게있습니다..
근데
이렇게 전부 잡고 흰색백그라운드가 들어가버리네요 ㅠㅠ
그타겟의 h4만 흰색을 잡게하고싶습니다
답변 2
[ code ] 좀 해주시지 ㅜㅜ
$(this).siblings('h4') 가 아니라 .prev()로 하면 되지 않나요?
aside_contents 의 siblings(계층이 같은 요소) 들에 효과를 주시도록 하셨다보니 모든 h4가 선택된 것입니다.
현재의 HTML 구조를 그대로 사용하신다면, prev() 를 대신 사용해보세요