在bootstrap中导航存在高亮问题以及奇葩方式代替

最新推荐文章于 2021-03-18 10:49:02 发布

jmin_coming

最新推荐文章于 2021-03-18 10:49:02 发布

阅读量2.4k

点赞数

分类专栏： css javascript

本文链接：https://blog.csdn.net/jian_xi/article/details/65007048

版权

javascript 同时被 2 个专栏收录

22 篇文章 0 订阅

订阅专栏

css

10 篇文章 0 订阅

订阅专栏

本文探讨了Bootstrap导航栏自定义高亮切换的问题及解决方案。详细分析了使用JS添加样式、hash值匹配等方法存在的问题，并提出了一种替代方案：通过为每个页面的body元素设置唯一ID来实现导航项的高亮显示。

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

1.bootstrap中存在问题

bootstrap导航添加自定义高亮切换问题:

1.利用js添加样式上去点击之后会出现闪动后消失问题(不能解决,由于导航栏是通过工具拼接到每个页面中,不能在直接绑定高亮class样式)

2.通过hash值是匹配否含有对应页面的导航,并且通过addClass().siblings().removeClass()这种方式不能解决

3.通过阻止事件冒泡的方式重复上面尝试,结果跟上面一样;通过阻止默认样式,可以添加样式到每个导航 li 上,但是阻止了页面跳转.

注意:以上问题尚未解决

2.奇葩方式代替

通过给每个页面的body添加一个id,借助每个独立的id找到对应页面下需要高亮的 li 选项,加上需要的样式,实现每个页面对应导航栏的高亮选项

头部html:

<div class="collapse navbar-collapse course" >
	<ul class="nav navbar-nav">
		<li class="index"><a href="index.jsp">首页</a></li>
		<li class="declarationInfo"><a href="declarationInfo.jsp">申报资料</a></li>
		<li class="courseIntroduction"><a href="courseIntroduction.jsp">课程简介</a></li>
		<li class="syllabus"><a href="syllabus.jsp">教学大纲</a></li>
		<li class="teachingTeam"><a href="teachingTeam.jsp">教学队伍</a></li>
		<li class="teachingSource"><a href="teachingSource.jsp">教学资源</a></li>
		<li class="practiceTeaching"><a href="practiceTeaching.jsp">实践教学</a></li>
		<li class="teachingEvaluation"><a href="teachingEvaluation.jsp">教学评价</a></li>
		<li class="resultShow"><a href="resultShow.jsp">成果展示</a></li>
		<li class="communication"><a href="communication.jsp">师生互动</a></li>
	</ul>
</div>

css:

/*导航高亮样式  */
#index li.index,#declarationInfo li.declarationInfo,
#courseIntroduction li.courseIntroduction,
#syllabus li.syllabus,#teachingTeam li.teachingTeam,
#teachingSource li.teachingSource,#practiceTeaching li.practiceTeaching,
#teachingEvaluation li.teachingEvaluation,#resultShow li.resultShow,
#communication li.communication{
	background:#eee !important;
}

然后每个对应子页面body上加上对应id即可,此处不再列举全部