效果图: 实现上部分效果其实很简单下面是代码
js代码
function clickWriter(obj) { $(obj).parent().find("a").each(function() { $(this).removeClass("active"); }); $(obj).addClass("active"); } //each()循环遍历html代码
<li class="nav-item nav-dropdown"> <a href="#" class="nav-link nav-dropdown-toggle" data-toggle="tab" > <i class="icon icon-cloud-upload"></i>上传资源 <i class="fa fa-caret-left"></i> </a> <ul class="nav-dropdown-items"> <li class="nav-item" onclick="clickWriter(this)"> <a class="nav-link" data-toggle="tab" href="#assignment" onclick="getassignment(event)"> <i class="icon icon-cloud-upload"></i>物联网课程 </a> </li> <li class="nav-item" onclick="clickWriter(this)"> <a class="nav-link" data-toggle="tab" href="#assignment" onclick="getassignment(event)"> <i class="icon icon-cloud-upload"></i>Linux课程 </a> </li> <li class="nav-item" onclick="clickWriter(this)"> <a class="nav-link" data-toggle="tab" href="#assignment" onclick="getassignment(event)"> <i class="icon icon-cloud-upload"></i>GIS课程 </a> </li> <li class="nav-item" onclick="clickWriter(this)"> <a class="nav-link" data-toggle="tab" href="#assignment" onclick="getassignment(event)"> <i class="icon icon-cloud-upload"></i>软件工程课程 </a> </li> <li class="nav-item" onclick="clickWriter(this)"> <a class="nav-link" data-toggle="tab" href="#assignment" onclick="getassignment(event)"> <i class="icon icon-cloud-upload"></i>马克思课程 </a> </li> <li class="nav-item" onclick="clickWriter(this)"> <a class="nav-link" data-toggle="tab" href="#assignment" onclick="getassignment(event)"> <i class="icon icon-cloud-upload"></i>专业英语课程 </a> </li> </ul> </li>