不用框架做项目，自己开发导航栏可能遇到的问题
效果图
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>
</a></li>
<li><a href="javascript:;"><img src="../../images/default.png" alt="">
<p>生活究竟对谁下了手</p>
</a></li>
<li><a href="javascript:;"><img src="../../images/default.png" alt="">
<p>夜猫子集合地</p>
</a></li>
<li><a href="javascript:;"><img src="../../images/default.png" alt="">
<p>敲会代码压压惊</p>
</a></li>
</ul>
</li>
<li class="hd_knowledge"><a href="javascript:;">知识库</a></li>
<li class="hd_use">
<a href="javascript:;">应用 <span class="bg-sprites icon-triangle-down"></span></a>
<ul class="hd_myuse ul_list" style="width:75px">
<li><a href="/pages/question/index.html">乐问</a></li>
<li><a href="javascript:;">课堂</a></li>
<li><a href="javascript:;">论坛</a></li>
</ul>
</li>
<li class="hd_manage"><a href="javascript:;">管理</a></li>
</ul>
</div>
常规用法——nav导航栏实现，很简单
// 点击导航栏改变样式
$(".hd_list").children().each(function (index, ele) {
$(ele).on('click', function () {
$(this).siblings().removeClass("now");
$(this).addClass("now");
})
})
})
解决问题跳转问题（3步走）
header.js
// 点击导航栏改变样式（解决a标签跳转样式不生效问题）
$(".hd_list").children().each(function (index, ele) {
$(ele).on('click', function () {
// session缓存 你所点击元素的 文本内容，赋值给hd_text
window.sessionStorage.setItem('hd_text', $(this).text())
})
})
})
utils.js文件（便于复用，自己封装的一个工具类）
/**
* @description 导航栏切换且跳转页面之后，“底部蓝条”样式仍然生效
* @author SHR
*/
nav() {
// 获取缓存的 值
var text = window.sessionStorage.getItem('hd_text') || '';
// 进行字符串操作 —— 即判断这个值里是否包含元素包含的关键可区分的信息
// 我这里是给每个li标签了一个类名，这里完全可以用for循环子元素实现
// 假如你点击了K吧，会把K吧所在元素的 innerText 缓存起来，然后进行比对，如果比对成功就给该元素添加一个 选中 的样式类名，然后将该元素的 兄弟节点 移除该类名
if (text.indexOf("首页") != -1) {
$('.hd_index').addClass("now");
$('.hd_index').siblings().removeClass("now");
}
else if (text.indexOf("K吧") != -1) {
$('.hd_kBar').addClass("now");
$('.hd_kBar').siblings().removeClass("now");
}
else if (text.indexOf("知识库") != -1) {
$('.hd_knowledge').addClass("now");
$('.hd_knowledge').siblings().removeClass("now");
}
else if (text.indexOf("应用") != -1) {
$('.hd_use').addClass("now");
$('.hd_use').siblings().removeClass("now");
}
else if (text.indexOf("管理") != -1) {
$('.hd_manage').addClass("now");
$('.hd_manage').siblings().removeClass("now");
}
}
例如：K吧 的html页面
最后在对应的跳转页面调用一下 上面utils.js里封装好的nav()函数就OK了
<script>
// 引用utils.js里的 nav() 方法
utils.nav();
</script>