一、知识介绍
1、jquery获取父级元素用parent()
$(this).parent('ul');
2、jquery获取同级元素用siblings()
$(this).parent('ul').siblings();
3、jquery获取子元素用find()
$(this).parent('ul').siblings().find('li');
二、实例
如下图所示:
需求: 要实现点击“工作区”下面的元素和点击“我的账号”下面的元素,来改变背景样式
实现:
1、html
<!-- 左边导航栏 start --> <div class="sidebar-nav"> <a href="#dashboard-menu" class="nav-header" data-toggle="collapse"> <span style="font-weight: bold;font-size: 16px;">工作区</span> </a> <ul id="dashboard-menu" class="nav nav-list collapse in"> <li class="active"> <a href="#" onclick="showAtRight('/manager/index')">主 页</a> </li> <li> <a href="#" onclick="showAtRight('/manager/course')">课程管理</a> </li> <li> <a href="#" onclick="showAtRight('/manager/carousel')">轮播配置</a> </li> <li> <a href="#" onclick="showAtRight('/manager/classify')">课程分类管理</a> </li> <li> <a href="#" onclick="showAtRight('/manager/user')">用户管理</a> </li> </ul> <a href="#accounts-menu" class="nav-header" data-toggle="collapse"> <span style="font-weight: bold;font-size: 16px;">我的账号</span> </a> <ul id="accounts-menu" class="nav nav-list collapse in"> <li onclick="showAtRight('/manager/personal')"> <a href="#">个人信息</a> </li> <li> <a href="loginManager">退出</a> </li> </ul> </div> <!-- 左边导航栏 end -->
2、jquery
$(document).ready(function(){ // 左边导航栏控制 $('.sidebar-nav ul li').click(function(){ $(this).addClass('active'); $(this).siblings().removeClass('active'); $(this).parent('ul').siblings().find('li').removeClass('active'); }); });
最后,大家如果发现我写的有错误的话,欢迎评论指出哦,共同进步。觉得我写的不错的,可以关注下哦^v^