基于jQuery实现的标签页

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

iteye_6481

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

阅读量203

点赞数

文章标签： xhtml javascript ui ViewUI

最近在看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中有效。