基于jQuery实现的标签页

最新推荐文章于 2024-01-09 16:02:28 发布

有点发红

最新推荐文章于 2024-01-09 16:02:28 发布

阅读量4.6k

点赞数

分类专栏： JavaScript 文章标签： jquery class function stylesheet div xhtml

本文链接：https://blog.csdn.net/sadfishsc/article/details/7496979

版权

JavaScript 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

最近在看OpenCart中的样式布局的时候学着弄了一个标签页的实现，做完之后才发现jQuery UI中已经有标签页的实现了，实现的方式也大致相同。

下面是我的实现，贴在下面以备未来使用。

HTML页面：

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tab Page Layout</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="tabs.js"></script>
</head>

<body>
<div class="tabs">
	<div class="tabhost">
    	<a href="#page1" class="selected">Page 1</a>
        <a href="#page2">Page 2</a>
        <a href="#page3">Page 3</a>
        <a href="#page4">Page 4</a>
        <a href="#page5">Page 5</a>
    </div>
    <div class="tabcontent">
    	<div id="page1">This is Page 1!</div>
        <div id="page2">This is Page 2!</div>
        <div id="page3">This is Page 3!</div>
        <div id="page4">This is Page 4!</div>
        <div id="page5">This is Page 5!</div>
    </div>
</div>
</body>
</html>

CSS样式 style.css：

body, div, a {
	margin: 0;
	padding: 0;
	font-family: Tahoma, Verdana, Arial, sans-serif;
	font-size: 16px;
}

.tabs {
	width: 600px;
	margin: 50px auto;
}

.tabhost {
	height: 24px;
}

.tabhost a {
	text-decoration: none;
	background: #f7f7f7;
	color: #ed6c07;
	padding: 5px;
	border-top: #dddddd 1px solid;
	border-left: #dddddd 1px solid;
	border-right: #dddddd 1px solid;
}

.tabhost a:hover {
	background: #ed6c07;
	color: #ffffff;
	padding-bottom: 6px;
}

.tabhost a.selected {
	background: #ffffff;
	color: #ed6c07;
	padding-bottom: 6px;
}

.tabcontent {
	border: 1px #dddddd solid;
	height: 600px;
}

jQuery操作 tabs.js：

$(function() {
	var tabhosts = $(".tabhost a");
	
	tabhosts.each(function() {
		$($(this).attr("href")).hide();
		
		if ($(this).hasClass("selected")) {
			$($(this).attr("href")).show();
		}
		
		$(this).click(function(event) {
			event.preventDefault();
			
			if (!$(this).hasClass("selected")) {
				tabhosts.each(function() {
					$(this).removeClass("selected");
					$($(this).attr("href")).hide();
				});
				
				$(this).addClass("selected");
				$($(this).attr("href")).show();
			}
		});
	});
});

实现的要点在于：

1. 初始时需要用jQuery的 hide() 函数将不需要显示的标签页隐藏。（hide() 函数实际上是将元素的属性设置为：style="display: none;"。）

2. 标签采用<a>元素，通过它的 href 属性，结合 jQuery 的选择器来定位标签页元素的 id。

3. 被选中的标签拥有特定的class，“selected”。通过这个class="selected"，结合 jQuery 的hasClass方法来确定哪个标签页该显示。

4. 在 jQuery 的click事件的处理函数中添加参数event，然后在函数体中使用event.preventDefault() 函数，并不会调用DOM本身的event以及event.preventDefault() 函数，而是会调用jQuery提供的preventDefault() 函数，从而达到在不同浏览器中都能阻止浏览器默认操作的目的。这样做的原因是Fire Fox不支持的DOM的event对象，而IE的event又没有preventDefault函数，这就使得单独使用event.preventDefault() 函数只会在Chrome中有效。