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

最新推荐文章于 2023-04-11 08:46:50 发布

chuyi6403

最新推荐文章于 2023-04-11 08:46:50 发布

阅读量331

点赞数

文章标签： javascript ui ViewUI

原文链接：https://my.oschina.net/u/2540091/blog/732645

版权

在使用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);
};

加上代码后，就能解决这个冲突，结果如下图所示

转载于:https://my.oschina.net/u/2540091/blog/732645