jquery 点击li循环高亮显示

最新推荐文章于 2023-04-11 11:59:44 发布

Kinghiee

最新推荐文章于 2023-04-11 11:59:44 发布

阅读量1.9k

点赞数 1

文章标签： jquery 高亮显示

本文链接：https://blog.csdn.net/qq_42683219/article/details/101936041

版权

效果图：
在这里插入图片描述
实现上部分效果其实很简单下面是代码

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>