web前端 -- js 导航

样式如下：

html

   <!--导航-->
        <div class="nav-box">
            <div class="nav-tap">
                <div onclick="materials()" class="nav-tap-item red">一级</div>
                <div onclick="second()" class="nav-tap-item">二级</div>
                
            </div>
        </div>
        <!--导航结束-->

css：

.red {
	float: left;
	color: red;
	font-weight: bold;
	border-bottom: 2px solid red;
}

js：

<!--小导航问题-->
<script type="text/javascript">
    $('.nav-tap div').on('click', function () {
        $(this).addClass("red").siblings('.nav-tap div').removeClass("red") //定位到点击的标签后，为其增加css样式，同时兄弟元素删除原来的样式
    });
</script>
<!--结束小导航-->

 

 

来源：CSDN

作者：༊྄ཻ ㎕࿐ 久

链接：https://blog.csdn.net/weixin_44944193/article/details/103765587