码疯窝

AngularJS 与 bootstrap Tabs 冲突奇妙解决办法.

2015/05/13 17:03:44    分类: 技术随笔    0人评论 次浏览

在使用AngularJs时, 发现AngularJs路由中的#与bootstrap tabs 插件中使用的#相冲突.

原代码如下:

<ul class="nav nav-tabs">
	<li class="active"><a href="#home" data-toggle="tab">Home</a>
	<li><a href="#profile" data-toggle="tab">Profile</a></li>
	<li><a href="#contacts" data-toggle="tab">Contacts</a></li>
</ul>

朋友无意中写出一段BUG代码却奇妙的解决了问题.
解决办法如下:

<ul class="nav nav-tabs">
	<li class="active"><a href="javascript:; #home" data-toggle="tab">Home</a>
	<li><a href="javascript:; #profile" data-toggle="tab">Profile</a></li>
	<li><a href="javascript:; #contacts" data-toggle="tab">Contacts</a></li>
</ul>

在href属性前加入 "javascript:;"

查看bootstrap 源码才恍然大悟.

bootstrap 在点击tab时, 是根据 href属性去找panel的selector

QQ截图20150513165948

代码中正则会去掉#之前的内容, 取得正确的selector, 而之前的javascript:;又正好破坏了href的锚点功能. 从而不会实现跳转.

继续查看有关 技术随笔的文章

0个访客评论