jquery 点击li循环高亮显示

mac2022-06-30  22

效果图: 实现上部分效果其实很简单下面是代码

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>
最新回复(0)