这里有新鲜出炉的 jQuery 示例,程序狗速度看过来!
jQuery 是一个兼容多浏览器的 javascript 框架,核心理念是 write less,do more(写得更少, 做得更多)。jQuery 在 2006 年 1 月由美国人 John Resig 在纽约的 barcamp 发布,吸引了来自世界各地的众多 JavaScript 高手加入,由 Dave Methvin 率领团队进行开发。
这篇文章主要介绍了 jQuery+CSS 实现的 tab 切换标签, 可兼容各浏览器, 涉及 jQuery 响应鼠标事件动态操作页面元素的相关技巧, 需要的朋友可以参考下
本文实例讲述了 jQuery+css 实现的 tab 切换标签。分享给大家供大家参考,具体如下:
运行效果截图如下:
具体代码如下:
- <!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>
- <title>
- tab切换
- </title>
- <script src="jquery-1.7.1.min.js" type="text/javascript">
- </script>
- <script type="text/javascript">
- (function($) {
- function set_active(tab, isActive, mode) {
- if (!tab) return;
- if (!isActive) {
- tab.removeClass('active');
- if (mode == "header") {
- var related_body = $(tab.find('a').attr('tab_body'));
- set_active(related_body, false, "body");
- }
- } else {
- tab.addClass('active');
- if (mode == "header") {
- var related_body = $(tab.find('a').attr('tab_body'));
- set_active(related_body, true, "body");
- }
- }
- }
- function change_active(self_$_obj) {
- var _self_tab_header = self_$_obj.parent();
- var prev_active_tab_header = _self_tab_header.parent().find('.active');
- set_active(prev_active_tab_header, false, "header");
- set_active(_self_tab_header, true, "header");
- }
- function init(self) {
- if (self.tab_header_length <= 0) {
- return;
- }
- var defaut_active_tab_header = null;
- for (var i = 0,
- length = self.tab_header_length; i < length; i++) {
- var tab_header = $(self.tab_header_array[i]);
- var tab_header_linker = tab_header.find('a');
- tab_header_linker.attr("tab_body", tab_header_linker.attr("href"));
- tab_header_linker.removeAttr("href");
- tab_header_linker.bind("click",
- function() {
- change_active($(this));
- });
- if (tab_header.hasClass('active')) {
- defaut_active_tab_header = tab_header;
- }
- }
- if (defaut_active_tab_header) {
- change_active($(defaut_active_tab_header.find('a')));
- } else {
- change_active($(self.tab_header_array[0].find(a)));
- }
- }
- $.fn.c_tab = function() {
- var _self = $(this);
- _self.tab_header_group = _self.find('.tab_header_group');
- _self.tab_header_array = _self.tab_header_group.find('.tab_header');
- _self.tab_header_length = _self.tab_header_array.length;
- if (_self.tab_header_length == 0) {
- return;
- }
- init(_self);
- }
- })($);
- $(document).ready(function() {
- $("#tabContainer").c_tab();
- });
- </script>
- <style type="text/css">
- body { margin:0; padding:0; background:#DFEFFF; } #tabContainer { width:500px;
- height:300px; margin-left:200px; margin-top:50px; border-radius:4px; -webkit-border-radius:4px;
- -moz-border-radius:4px; } .tab_header_group { color:Green; z-index:10;
- background:#DDDDDD url('img/navbg1.jpg'); width:100%; padding:0; margin:0;
- border-bottom:1px solid gray; border-radius:4px 4px 0 0;} .tab_header {
- line-height:30px; font-size:14px; display:inline-block; cursor:pointer;
- margin-right:-3px; *display:inline; zoom:1; padding-left:10px; padding-right:10px;
- border-radius:4px 4px 0 0; } .tab_header a,a:hover { text-decoration:none;
- } .tab_header:hover { background:#F5F5F5; } .tab_header_group .active {
- margin-bottom:0px; background:gray; color:#fff; } .tab_body { margin-top:1px;
- display:none; } .tab_body_group .active { display:block; }
- </style>
- </head>
- <body>
- <div id="tabContainer">
- <ul class="tab_header_group">
- <li class="tab_header">
- <a href="#tab1">
- 首页1
- </a>
- </li>
- <li class="tab_header">
- <a href="#tab2">
- 首页2
- </a>
- </li>
- <li class="tab_header active">
- <a href="#tab3">
- 首页3
- </a>
- </li>
- <li class="tab_header">
- <a href="#tab4">
- 首页4
- </a>
- </li>
- <li class="tab_header">
- <a href="#tab5">
- 首页5
- </a>
- </li>
- </ul>
- <div class="tab_body_group">
- <div id="tab1" class="tab_body" style="width:100%; height:200px; background:#F2F2F2;">
- tab1
- </div>
- <div id="tab2" class="tab_body" style="width:100%; height:200px; background:#F2F2F2;">
- tab2
- </div>
- <div id="tab3" class="tab_body" style="width:100%; height:200px; background:#F2F2F2;">
- tab3
- </div>
- <div id="tab4" class="tab_body" style="width:100%; height:200px; background:#F2F2F2;">
- tab4
- </div>
- <div id="tab5" class="tab_body" style="width:100%; height:200px; background:#F2F2F2;">
- tab5
- </div>
- </div>
- </div>
- </body>
- </html>
希望本文所述对大家 jQuery 程序设计有所帮助。
来源: http://www.phperz.com/article/17/0719/267326.html