2009.12.28——jQuery ui 之选项卡-优快云博客

本文链接：https://blog.youkuaiyun.com/cody123/article/details/83522748

本文介绍了使用jQuery UI实现选项卡效果的方法，通过简单的代码示例展示了如何设置选项卡，并启用了鼠标悬停自动切换的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2009.12.28——jQuery ui 之选项卡
发现了新大陆 jquery ui 呵呵很强大，小试了一下，如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<title>jQuery UI Tabs - Default functionality</title>
	<link type="text/css" href="jquery-ui-1.7.2.custom/development-bundle/themes/ui-lightness/ui.all.css" rel="stylesheet" />        //引入ui的css
	<script type="text/javascript" src="js/jquery-1.3.2.js"></script>//引入jquery
	<script type="text/javascript" src="jquery-ui-1.7.2.custom/development-bundle/ui/jquery-ui-1.7.2.custom.js"></script>   //引入ui的js
	<script type="text/javascript">
	$(function() {
		/*$("#tabs").tabs(); //点击鼠标来切换
		$("#tabs").tabs({
            		collapsible: true//可折叠的 就是点两下可以折叠
        	});*/
		$("#tabs").tabs({
			event: "mouseover"  //鼠标滑过来切换
		});
	});
	</script>
</head>
<body>

<div class="demo">

<div id="tabs">
	<ul>
		<li><a href="#tabs-1">标签一</a></li>
		<li><a href="#tabs-2">标签二</a></li>
		<li><a href="#tabs-3">标签三</a></li>
	</ul>
	<div id="tabs-1">
		<p>唐僧</p>
	</div>
	<div id="tabs-2">
		<p>悟空</p>
	</div>
	<div id="tabs-3">
		<p>悟净</p>
		<p>悟能</p>
	</div>
</div>

</div><!-- End demo -->

</body>
</html>

路径见jauery-ui.bmp