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

1.bootstrap中存在问题

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

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

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

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

注意:以上问题尚未解决

2.奇葩方式代替

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

头部html:

	

		
首页
		
申报资料
		
课程简介
		
教学大纲
		
教学队伍
		
教学资源
		
实践教学
		
教学评价
		
成果展示
		
师生互动
	

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即可,此处不再列举全部

.......

对于上面尚未解决的问题,会继续 寻找解决方法，若有大神有相关经验，膜拜分享！