导航栏里面的a标签跳转链接之后，底部的选中样式失效或被初始样式覆盖的解决方法

最新推荐文章于 2022-09-21 14:57:51 发布

Song-HR

最新推荐文章于 2022-09-21 14:57:51 发布

阅读量2.2k

点赞数 1

分类专栏：正在成长的前端小白文章标签：导航栏 nav 选中样式不生效解决方法

本文链接：https://blog.csdn.net/weixin_42426950/article/details/90243265

版权

本文介绍了解决导航栏a标签跳转后底部选中样式失效或被覆盖的方法。通过html结构展示、header.js和utils.js的使用，以及在K吧页面的应用实例，详细阐述了解决这个问题的3步走策略。

摘要由CSDN通过智能技术生成

不用框架做项目，自己开发导航栏可能遇到的问题

效果图
html结构
常规用法——nav导航栏实现，很简单
解决问题跳转问题（3步走）

效果图

在这里插入图片描述

html结构

<div class="hd_boxList">
                <ul class="hd_list">
                    <li class="now hd_index"><a href="/index.html">首页</a></li>
                    <li class="hd_kBar">
                        <a href="/pages/question/index.html">K吧 <span class="bg-sprites icon-triangle-down"></span></a>
                        <ul class="hd_mykBar ul_list">
                            <li><a href="/pages/question/question.html"><img src="../../images/default.png" alt="">
                                    <p>敲会代码压压惊</p>