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

最新推荐文章于 2024-05-24 09:37:59 发布

weixin_33704234

最新推荐文章于 2024-05-24 09:37:59 发布

阅读量1.5k

点赞数

文章标签： ui python javascript ViewUI

原文链接：https://my.oschina.net/kkrgwbj/blog/220230

版权

2019独角兽企业重金招聘Python工程师标准>>>

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

Html代码

<head>
<base href="<%=basePath%>">
<link rel="stylesheet" href="<%=basePath%>jqueryui/development-bundle/themes/base/jquery.ui.all.css">
<script src="<%=basePath%>jqueryui/js/jquery-1.9.1.js"></script>
<script src="<%=basePath%>jqueryui/development-bundle/ui/jquery.ui.core.js"></script>
<script src="<%=basePath%>jqueryui/development-bundle/ui/jquery.ui.widget.js"></script>
<script src="<%=basePath%>jqueryui/development-bundle/ui/jquery.ui.tabs.js"></script>
<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>

//解决方法：

1、去掉<base href="<%=basePath%>">；
2、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 的脚本中可用。

此元素不会被渲染。

此元素不需要关闭标签。