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 的腳本中可用。

此元素不會被渲染。

此元素不須要關閉標籤。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。