js 메뉴 표시 줄 전환 효과 간단하게 구현

작은 사례 를 공유 하여 메뉴 표시 줄 의 전환 을 실현 하고 왼쪽 사 이 드 바 를 클릭 하여 오른쪽 주체 의 페이지 를 보 여 줍 니 다.참고 하 시기 바 랍 니 다.구체 적 인 내용 은 다음 과 같 습 니 다.
우선 html 페이지 의 작성 을 실현 합 니 다:

<div id="header"></div>
<div id="main">
 <!--    -->
 <div class="affix">
 <h4>    </h4>
 <ul>
 <li><a href="#container-myorder" >    </a></li>
 <li><a href="#container-buy-stat-canvas" >    （Canvas ）</a></li>
 <li><a href="#container-buy-stat-svg" >    （SVG ）</a></li>
 <li><a href="#container-luck-lottery" >    </a></li>
 </ul>
 </div>
 <!--      -->
 <div class="right-body">
 <div class="active" id="container-myorder">    </div>
 <div id="container-buy-stat-canvas">    （Canvas）</div>
 <div id="container-buy-stat-svg">    （SVG）</div>
 <div id="container-luck-lottery">    </div>
 </div>
</div>
<div id="footer"></div>

그 다음은 css 효과 실현:

#main .affix {
 box-sizing: border-box;
 width: 210px;
 float: left;
 padding: 15px;
}
.affix h4 {
 font-size: 1.2em;
 margin: 10px 0;
}
.affix ul li{
 padding: 5px 20px;
}
.affix ul li.active a{
 color: #e4393c;
 font-weight: bold;
}
#main .right-body {
 box-sizing: border-box;
 margin-left: 210px;
 padding: 15px;
}
#main .right-body > div {
 display: none;
 min-height: 300px;
}
#main .right-body > div.active {
 display: block;
}

마지막 단 계 는 간단 한 js 를 활용 하여 왼쪽 사 이 드 바 옵션 을 클릭 하여 오른쪽 주체 구역 을 보 여 줍 니 다.

$('.affix ul li a').click(function(e){
 e.preventDefault();
 //  li active   
 $(this).parent().addClass('active').siblings('.active').removeClass('active');
 //        div active   
 var id = $(this).attr('href');
 $(id).addClass('active').siblings('.active').removeClass('active');
});

간단 한 메뉴 전환 을 종합해 보면 이 루어 집 니 다.
더 많은 메뉴 효과 클릭《자 바스 크 립 트 메뉴 특 강》학습,그리고 좋 은 주제 공유:Javascript 레벨 연결 메뉴 필터 집합
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.