jquery tab

最新推荐文章于 2025-05-25 09:48:18 发布

xia_andy

最新推荐文章于 2025-05-25 09:48:18 发布

阅读量90

点赞数

CC 4.0 BY-SA版权

文章标签： jQuery HTML Microsoft ViewUI

本文链接：https://blog.youkuaiyun.com/xia_andy/article/details/83949342

本文展示了如何使用jQuery TAB插件创建交互式导航菜单，通过不同的触发事件实现内容切换。

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

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>收信人列表</title>
<style>
* {
	margin:0;
	padding:0;
}
body {
	background:#e3e3e3;
	height:100%;
	font:normal normal 12px/24px "Microsoft yahei", Arial;
	padding-bottom:30px;
}
#title{width:300px;margin:3% auto 0;}
h1{font-size:18px;}
h6{ font-size:12px; font-weight:normal; color:#333;margin-bottom:10px; }
h6 a { color:#09c; }
#wrapper {
	width:300px;
	margin:0 auto;
	background:#f8f8f8;
	border:1px solid #a3a3a3;
	padding:20px 20px 50px;
	border-radius:5px;-moz-border-radius:5px;
}
.box{width:210px;margin:10px auto 0;background:#fff;border:1px solid #d3d3d3;}
.tab_menu{list-style:none;width:210px;overflow:hidden;}
.tab_menu li{width:70px;float:left;height:30px;line-height:30px;color:#fff;background:#093;text-align:center;cursor:pointer;}
.tab_menu li.current{color:#333;background:#fff;}
.tab_box{padding:20px;height:120px;}
.tab_box .hide{display:none;}
h3{color:#333;font-size:14px;width:210px;margin:30px auto 0;}
</style>
</head>

<body>
<div id="title">
<h1>jQuery TAB插件演示</h1>
<h6>by:<a href="http://stylechen.com/">Stylechen.com</a></h6>
</div>
<div id="wrapper">
<h3>回调函数</h3>
	<div class="box demo5">
		<ul class="tab_menu">
			<li class="current">新闻</li>
			<li>图片</li>
			<li>军事</li>
		</ul>
		<div class="tab_box">
			<div>新闻</div>
			<div class="hide">图片</div>
			<div class="hide">军事</div>
		</div>
	</div>
</div>
<script src="js/jquery-1.4.4.min.js"></script>
<script src="js/jquery.tabs.js"></script>
<script>
//<![CDATA[
$(function(){
	$('.demo1').Tabs();
	$('.demo2').Tabs({
		event:'click'
	});
	$('.demo3').Tabs({
		timeout:300
	});
	$('.demo4').Tabs({
		auto:3000
	});
	$('.demo5').Tabs({
		event:'click',
		callback:tabcallback
	});
	function tabcallback(){
		//alert("我是回调函数 :)");
	}
});	
//]]>
</script>
</body>
</html>