`

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

阅读更多

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

<head>
<base href="<%=basePath%>">
	<!-- demo -->
	<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">
	<!-- demo end -->
	
	<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 的脚本中可用。 

此元素不会被渲染。 

此元素不需要关闭标签。

分享到:
评论

相关推荐

    jqueryui tabs

    jQuery UI 是一个基于 jQuery 库的强大用户界面工具集,它提供了许多可自定义的组件,如对话框(Dialog)、滑块(Slider)、日期选择器(Datepicker)以及我们这里关注的选项卡(Tabs)。`jQuery UI Tabs` 是一个...

    jquery ui tabs paging 不换行

    jQuery UI Tabs Paging 是一个用来对太多的 Tab 进行分页显示的 jQuery 插件。 默认的 tabs 插件一旦 tab 过多就会换行,影响页面布局。jquery.ui.tabs.paging 的作用就在于不让其换行,在两头增加左右滑动的图片...

    jquery ui tabs paging 扩展

    jquery.ui.tabs 的扩展插件。 默认的 tabs 插件一旦 tab 过多就会换行,影响页面布局。jquery.ui.tabs.paging 的作用就在于不让其换行,在两头增加左右滑动的图片按钮,对 tab 进行滚动。 使用上也非常简单,在页面...

    jquery ui tabs_jqgrid demo

    从给定的文件信息来看,这是一段网页代码示例,主要展示了如何在网页中集成jQuery UI Tabs和jqGrid插件。以下是对标题、描述、标签以及部分内容中涉及的关键知识点的详细解读: ### 关键知识点:jQuery UI Tabs **...

    jquery-ui.css、jquery-ui.js下载

    《jQuery UI:深入理解与应用》 jQuery UI是基于JavaScript库jQuery的一个扩展,它提供了一系列丰富的用户界面组件,包括但不限于对话框(Dialogs)、日期选择器(Datepickers)、拖放功能(Drag and Drop)、排序...

    Jquery UI Tabs插件扩展

    **jQuery UI Tabs插件扩展详解** jQuery UI是一个强大的JavaScript库,它提供了许多用户界面组件,包括我们今天要讨论的Tabs插件。这个插件能够帮助开发者轻松创建功能丰富的标签页式布局,提升用户体验,使网站...

    JQuery UI 中文帮助文档

    jQuery UI 中文帮助文档是学习和解决问题的重要参考,它详细解释了各个组件的使用方法和API。此外,社区论坛、Stack Overflow 和其他在线资源也是获取帮助和分享经验的好地方。 综上所述,jQuery UI 是一个功能强大...

    jquery ui tabs

    接着,可以从官方网站(https://jqueryui.com)下载jQuery UI的压缩包,其中包括CSS样式文件和JavaScript脚本。在项目中,通常需要引入以下两个文件: 1. `css/jquery-ui.min.css`:这是jQuery UI的基础样式文件,...

    jQuery-ui-tabs 分页相关

    本文将深入探讨 `jQuery-ui-tabs` 如何实现分页功能,并结合提供的文件名 `ui分页1.zip` 和 `test-tabs-paging` 来解析这一主题。 1. **jQuery-ui-tabs 概述** `jQuery-ui-tabs` 是一个可自定义的标签页组件,允许...

    前端项目-jqueryui-touch-punch.zip

    在“前端项目-jqueryui-touch-punch”这个项目中,包含的文件可能是jQuery UI Touch Punch的源码或示例。通过解压并研究这个项目,你可以了解到如何将这两个工具结合到自己的Web应用中,以提供兼容触摸设备的用户...

    jquery ui tabs(底色自由版)

    根据jquery官方的tabs插件而来,官方插件在页面底色是白色时,是没有问题滴~~但如果换了其他颜色,tab的边角就成了白色,这怎么能拿出手呢~~所以鄙人请公司美工MM重新整了哈tab.png。现在没有问题了,而且鼠标移上去...

    jQuery tabs 纵向显示

    在网页设计中,jQuery UI 的 tabs 是一个非常实用的功能,它允许我们将多个内容区域组织成可切换的选项卡,提供了一种整洁的方式来展示大量信息。然而,标准的 jQuery tabs 默认是横向排列的,但有时为了适应页面...

    jquery-ui-1.10.4.custom

    **jQuery UI 深度解析** jQuery UI 是一个基于广泛使用的 JavaScript 库 jQuery 的扩展,它为开发者提供了丰富的用户界面组件和交互效果。这个名为 "jquery-ui-1.10.4.custom" 的压缩包文件,很显然是一个自定义...

    jQuery UI以及jQuery easy-ui技术手册

    - **API文档**:`jQuery_jQueryUI.chm`文件是jQuery UI的API参考,详尽地列出了每个组件的方法、属性和事件,是开发过程中不可或缺的参考资料。 **jQuery Easy-UI技术手册** jQuery Easy-UI 是基于jQuery和jQuery ...

    jquery ui & themes

    1. **部件(Widgets)**:jQuery UI提供了多种UI部件,如日期选择器(Datepicker)、对话框(Dialog)、滑块(Slider)、进度条(Progressbar)、标签页(Tabs)和下拉菜单(Selectmenu)等。这些部件都封装了复杂的...

    jquery-ui-1.10.4

    《jQuery UI 1.10.4:深入理解与应用》 jQuery UI 是一个基于 jQuery JavaScript 库的强大用户界面库,提供了丰富的交互效果、可定制的主题以及多种可重用的组件。在本篇文章中,我们将深入探讨jQuery UI 1.10.4...

    jquery-ui插件

    jQuery UI允许通过主题 roller 工具(http://jqueryui.com/themeroller/)来自定义组件的样式,以匹配网站的整体设计。你可以选择颜色、字体、边框等样式,然后下载生成的CSS文件,替换到项目中。 此外,还可以通过...

    一个jquery的tabs

    jQuery UI中的Tabs组件是一个强大的网页交互元素,它允许开发者创建功能丰富的标签页式界面。这个压缩包包含了实现jQuery Tabs所需的基本文件,包括`tabs.js`(核心插件脚本)、`core.js`(jQuery UI的核心库)以及`...

    jquery-ui-1.7.3.custom 完整开发包

    `jQuery UI 1.7.3 Custom` 是一个流行的前端框架,主要用于构建交互式用户界面。这个完整开发包包含了创建高效、美观且响应式的网页应用所需的所有组件和资源。在这个压缩包中,我们可以找到以下几个关键部分,它们...

Global site tag (gtag.js) - Google Analytics