$(function () {

A:當(dāng)點(diǎn)擊[移動(dòng)端]/鼠標(biāo)移入上部菜單選項(xiàng)卡時(shí)，設(shè)置內(nèi)容列表區(qū)域

 1.監(jiān)聽(tīng)選項(xiàng)卡的移入事件

$(".navc>li").mouseenter(function () {
 1.1修改被移入選項(xiàng)卡
$(this).addClass("current");
 1.2還原其它兄弟選項(xiàng)卡
$(this).siblings().removeClass("current");
 1.3獲取當(dāng)前移出選項(xiàng)卡的索引
var index = $(this).index();
 1.4根據(jù)索引找到對(duì)應(yīng)的
var $li = $(".contentc>li").eq(index);
console.log(index);
 1.5 this下的操作
$li.addClass("contli_style").animate({"top": "-3px" , }, 300);
1.6 this下的操作siblings
$li.siblings().removeClass("contli_style").animate({"top": "0px" , }, 300);
});

B:當(dāng)點(diǎn)擊[移動(dòng)端]/鼠標(biāo)移入內(nèi)容區(qū)域時(shí)，設(shè)置上部菜單選項(xiàng)卡
$(".contentc>li").mouseenter(function () {
$(this).addClass("contli_style").animate({"top": "-3px" , }, 300);
$(this).siblings().removeClass("contli_style").animate({"top": "0px" , }, 300);
var index = $(this).index();
var $navc_li = $(".navc>li").eq(index);
$navc_li.addClass("current");
$navc_li.siblings().removeClass("current");
});

});

【完整代碼下載】

上一篇：網(wǎng)頁(yè)設(shè)計(jì)中如何讓ul下的多個(gè)li元素水平居中

下一篇：百度編輯器上傳圖片后出現(xiàn)圖片屬性焦點(diǎn)無(wú)法編輯下文的解決方法