建站
咨詢
售后
建站咨詢
新聞中心
這里有您想知道的互聯(lián)網營銷解決方案
簡單實現(xiàn)js菜單欄切換效果
分享一個小案例，實現(xiàn)菜單欄的切換，點擊左側邊欄，展示右側主體的頁面，供大家參考，具體內容如下
為黃浦等地區(qū)用戶提供了全套網頁設計制作服務，及黃浦網站建設行業(yè)解決方案。主營業(yè)務為網站設計、成都網站制作、黃浦網站設計，以傳統(tǒng)方式定制建設網站，并提供域名空間備案等一條龍服務，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務。我們深信只要達到每一位用戶的要求，就會得到認可，從而選擇與我們長期合作。這樣，我們也可以走得更遠！
首先實現(xiàn)html頁面的編寫：
我的訂單消費統(tǒng)計（Canvas）消費統(tǒng)計（SVG）幸運抽獎
其次是css效果實現(xiàn)：
#main .affix {
box-sizing: border-box;
width: 210px;
float: left;
padding: 15px;
}
.affix h5 {
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實現(xiàn)點擊左側邊欄選項，展示右側主體區(qū)域：
$('.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');
});
綜上一個簡單的菜單切換就實現(xiàn)了。
更多菜單效果點擊《JavaScript菜單專題》學習，還有一些不錯的專題分享給大家： Javascript級聯(lián)菜單特效匯總
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。
新聞標題：簡單實現(xiàn)js菜單欄切換效果
文章地址：http://ef60e0e.cn/article/gsjepc.html
