jQuery写的tab选项卡

最新推荐文章于 2021-01-11 21:13:12 发布

chen106106

最新推荐文章于 2021-01-11 21:13:12 发布

阅读量165

点赞数

CC 4.0 BY-SA版权

分类专栏： jquery学习笔记文章标签： javascript xhtml 数据库 ViewUI

本文链接：https://blog.youkuaiyun.com/chen106106/article/details/84249946

jquery学习笔记专栏收录该内容

10 篇文章

订阅专栏

本文介绍如何使用HTML、CSS和jQuery实现一个简单的选项卡菜单效果。通过给每个标题栏注册事件，切换时显示对应的内容并改变样式。示例代码展示了两个选项卡：新闻和教程，并附带了完整的实现代码。

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

选项卡的主要原理是给每个标题栏注册事件，事件处理函数的作用就是显示与某个标题栏对应的选项卡，给它加一个被选中的样式，同时隐藏其他的选项卡，移除被选中的样式。

下面是具体的html，css，javascript代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>yensdesign.com - Create a smooth tabbed menu with jQuery</title>
	<link rel="stylesheet" href="css/general.css" type="text/css" media="screen" />
	<style type="text/css">


* {
border:0pt none;
font-family:inherit;
font-size: 100%;
font-style:inherit;
font-weight:inherit;
margin:0pt;
padding:0pt;
vertical-align:baseline;
}

.clear{
	clear: both;
	height: 0;
	visibility: hidden;
	display: block;
}
a{
	text-decoration: none;
}

/******* MENU *******/
#container{
	margin: 7em auto;
	width: 400px;
}
#container ul{
	list-style: none;
	list-style-position: outside;
}
#container ul.menu li{
	float: left;
	margin-right: 5px;
	margin-bottom: -1px;
}
#container ul.menu li{
	font-weight: 700;
	display: block;
	padding: 5px 10px 5px 10px;
	background: #efefef;
	margin-bottom: -1px;
	border: 1px solid #d0ccc9;
	border-width: 1px 1px 1px 1px;
	position: relative;
	color: #898989;
	cursor: pointer;
}
#container ul.menu li.active{
	background: #fff;
	top: 1px;
	border-bottom: 0;
	color: #5f95ef;
}
/******* /MENU *******/
/******* CONTENT *******/
.content{
	margin: 0pt auto;
	background: #efefef;
	background: #fff;
	border: 1px solid #d0ccc9;
	text-align: left;
	padding: 10px;
	padding-bottom: 20px;
	font-size: 11px;
}
.content h1{
	line-height: 1em;
	vertical-align: middle;
	height: 48px;
	padding: 10px 10px 10px 52px;
	font-size: 32px;
}
/******* /CONTENT *******/
/******* NEWS *******/
.content.news h1{
	background: transparent url(images/news.jpg) no-repeat scroll left top;
}
.content.news{
	display: block;
}
/******* /NEWS *******/
/******* TUTORIALS *******/
.content.tutorials h1{
	background: transparent url(images/tuts.jpg) no-repeat scroll left top;
}
.content.tutorials{
	display: none;
}

	</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">


$(document).ready(function(){
	$(".menu > li").click(function(e){
		switch(e.target.id){
			case "news":
				//change status &amp;amp;amp; style menu
				$("#news").addClass("active");
				$("#tutorials").removeClass("active");
		
				//display selected division, hide others
				$("div.news").fadeIn();
				$("div.tutorials").hide();
		
			break;
			case "tutorials":
				//change status &amp;amp;amp; style menu
				$("#news").removeClass("active");
				$("#tutorials").addClass("active");
		
				//display selected division, hide others
				$("div.tutorials").fadeIn();
				$("div.news").hide();
			
			break;
		}
		return false;
	});
});

</script>
</head>
<body>
	<div id="container">
		<ul class="menu">
			<li id="news" class="active">News</li>
			<li id="tutorials">Tutorials</li>
		</ul>
		<span class="clear"></span>
		<div class="content news">
			<h4>Latest News</h4>
			<ul>
				<li> Boobles: First theme on Themeforest released!</li>
				<li> Cokidoo becomes official</li>
				<li> plusmusica.com private beta invitations</li>
				<li> yensdesign.com 2.0 launched!</li>
			<ul>
		</div>
		<div class="content tutorials">
			<h4>Latest Tutorials</h4>
			<ul>
				<li> Top 10 free fonts for professional design</li>
				<li> Create an amazing music player using mouse gestures &amp;amp;amp;amp;amp; hotkeys</li>
				<li> Boobles: First theme on Themeforest released!</li>
				<li> Creating AJAX websites based on anchor navigation</li>
				<li> Fast Tip: Create your personal blog to promote your self</li>
				<li> How to make a brilliant mysql forum database from scratch</li>
			<ul>
		</div>
		
	</div>
</body>
</html>