jquery ui tabs奇怪状况！！！--已解决

时间 2019-12-12

原文原文链接

这个问题纠结了一两天！！！目前还未解决，真是出了奇了。javascript

Html代码css

<head> html
<base href="<%=basePath%>"> java
jquery
<link rel="stylesheet" href="<%=basePath%>jqueryui/development-bundle/themes/base/jquery.ui.all.css"> ios
<script src="<%=basePath%>jqueryui/js/jquery-1.9.1.js"></script> api
<script src="<%=basePath%>jqueryui/development-bundle/ui/jquery.ui.core.js"></script> 框架
<script src="<%=basePath%>jqueryui/development-bundle/ui/jquery.ui.widget.js"></script> jsp
<script src="<%=basePath%>jqueryui/development-bundle/ui/jquery.ui.tabs.js"></script> ui
<link rel="stylesheet" href="<%=basePath%>jqueryui/development-bundle/demos/demos.css">
<script type="text/javascript">
$(function() {
$("#tabs").tabs();
});
</script>
</head>
<body>
<div id="tabs">
<ul>
<li><a href="#tabs-1">Nunc tincidunt</a></li>
<li><a href="#tabs-2">Proin dolor</a></li>
<li><a href="#tabs-3">Aenean lacinia</a></li>
</ul>
<div id="tabs-1">
<p>1-Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
</div>
<div id="tabs-2">
<p>222Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
</div>
<div id="tabs-3">
<p>3333Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p>
</div>
</div>
<div class="demo-description">
<p>44444Click tabs to swap between content that is broken into logical sections.</p>
</div>
</body>
</html>

//解决方法：

一、去掉<base href="<%=basePath%>">；
二、jsp头部相应部分换成<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">；

================================================
资料以下：

base标记是一个基连接标记，是一个单标记。用以改变文件中全部连结标记的参数内定值。它只能应用于标记<head>与</head>之间。
你网页上的全部相对路径在连接时都将在前面加上基连接指向的地址。

重要属性：
href
设定前缀的连接地址

target
设定文件显示的窗口,同a标记中的target

简单例子：
<html>
<head>
<base href="http://www.baidu.com" target="_blank">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>base标记</title>
<link rel="Shortcut Icon" href="ani.CUR">
</head>
<body>
<a href="77.htm" target="_self">77</a>
<a href="88.htm">88</a>
</body>
</html>

当点了连接后，跳出的文件是http://www.baidu.com/77.htm或http://www.baidu.com/88.htm，它就是在这些相对路径的文件前加上基连接指向的地址。若是目标文件中的连接没有指定

target属性，就用base标记中的target属性。
常在框架结构中用，如左右两个框架，把左边的框架中文件里的链接都显示在右边的框架里。只要用base标记，把其target属性值写为右框架名称，这就不用再为左框架里的文件中的每个

链接都指定target属性。

当使用时，BASE 元素必须出如今文档的 HEAD 内，在任何对外部源的引用以前。

此元素在 Microsoft? Internet Explorer 3.0 的 HTML 中可用，在 Internet Explorer 4.0 的脚本中可用。

此元素不会被渲染。

此元素不须要关闭标签。