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>
<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>物联网课程
<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课程
<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课程
<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>软件工程课程
<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>马克思课程
<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>专业英语课程
效果图:实现上部分效果其实很简单下面是代码js代码function clickWriter(obj) { $(obj).parent().find("a").each(function() { $(this).removeClass("active"); }); $(obj).addClass("active");}//each()循环遍历h...
$("li").click(function() {
$("li").removeClass("active"); //移除所有li的active类
$(this).addClass("active"); //给当前点击的li添加active类
CSS部分:
.active {
background-color: #ccc; //选中的li的背景颜色
这段代码会在每次点击li时,移除所有li的active类,然后给当前点击的li添加active类,从而改变选中的li的背景颜色。
vue2.x+ts项目,在props type导入自定义接口类型报‘xxx‘ only refers to a type, but is being used as a value here处理办法
13736