jquery 点击li循环高亮显示

效果图：

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

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>

jquery 点击li循环高亮显示相关推荐

Jquery中ul li循环取值方式
/*对ul下的li添加click事件,不用在文档加载完毕后循环遍历*/ 1.$(document).ready(function(){ $("ul li").cli ...
jquery点击li触发a链接href事件
$("#left li").click(function() { $("a",this)[0].click(); }); 之前我用$("a" ...
HTML下拉菜单去掉点,jQuery点击页面其他部分隐藏下拉菜单功能
一.开发小要点 web页面中,我们一般不用select.option来实现下拉菜单效果,因为下拉框的样式丑且难以美化,所以我们选择控制ul显示隐藏来实现同样且高大上的效果,但是不能像下拉框那样点击页面 ...
jQuery点击查看更多，列表陆续显示
jQuery点击查看更多图片演示效果: jQuery点击查看更多 HTML代码: <div class="gallerywrap"><div class=&qu ...
jquery点击缩略图切换视频播放的视频切换焦点图效果
一款由jquery实现的视频切换特效,可以像图片切换那样切换所选择的视频来播放,图片切换相对来说较简单,但视频切换的话就需要播放插件的支持,选择视频缩略图后,上边原来显示大图片的地方是显示一个播放器, ...
jquery li ul 伪分页_求教关于Jquery的ul li的分页,该怎么处理
求教关于Jquery的ul li的分页 ul 下有若干个li 3个为1个分页 1个input按钮点击显示后3个另一个显示前3个求大神这个怎么做分享到: 更多 ------解决方案-------- ...
php图片点击查看大图,jQuery点击小图看大图，大图查看内容详情所有图片
jQuery点击小图看大图,大图查看内容详情所有图片: html代码如下: × < > CSS代码如下: * { margin:0; padding:0; } body { overflo ...
jquery 点击事件第一次点击选中第二次点击改变状态
jquery点击事件第一次选中:第二次消失 $("#myCard li").val(1); $("#myCard li").click(functio ...
ajax删除节点,jQuery实现删除li节点的方法
废话不多说了,直接给大家贴代码了,具体代码如下所示: ul { list-style: none; } li { line-height: 25px; margin-top: 3px; } li:ho ...

jquery 点击li循环高亮显示

jquery 点击li循环高亮显示相关推荐

最新文章

热门文章