您的位置：首页 > Web前端 > JQuery

解决JQuery UI中tabs()方法与HTML <base>标签冲突

2016-08-15 00:00 1236 查看
在使用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);
};

加上代码后，就能解决这个冲突，结果如下图所示
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  jQuery UI HTML base 冲突 解决
相关文章推荐
新的分享
章节导航