在使用JQuery UI的时候,经常会用到 Tabs Widget 这个标签页部件
标签页部件通过 设置标签按钮的<a href="#XXX">来跳转到页面的<div id="XXX">标签
Tabs Widget 通过href中开头是否为#号来判断要跳转到网面还是页面的标签
但是我们在实际使用中便会发现,当我们在网页的<head>里设置<base>标签的时候
Tabs Widget 会与 <base>产生冲突,将会无视href中的"#",直接跳转到base的href
造成整个Tabs Widget标签页部件的错乱,出现类似下图的情况
为了解决这个冲突,可以在使用使用tabs()之前,加上这样一段代码
$.fn.__tabs = $.fn.tabs;
$.fn.tabs = function (a, b, c, d, e, f) {
var base = window.location.href.replace(/#.*$/, '');
$('ul>li>a[href^="#"]', this).each(function () {
var href = $(this).attr('href');
$(this).attr('href', base + href);
});
$(this).__tabs(a, b, c, d, e, f);
};
加上代码后,就能解决这个冲突,结果如下图所示