Home > Web Front-end > JS Tutorial > Tab页界面,用jQuery及Ajax技术实现_jquery

Tab页界面,用jQuery及Ajax技术实现_jquery

WBOY
Release: 2016-05-16 18:46:08
Original
1197 people have browsed it

到了B/S开发时代,网页前端布局也把Tab页的布局形式吸收了过来。特别是和Ajax技术结合起来,可以更充分发挥Tab页的良好表现力和数据缓存的优势,是一种良好的网页布局形式。
网上的Tab页代码很多,实现也大同小异 ,但代码都显得凌乱,若要真的用的话,必须费劲的吃透它,才能进行二次定制开发,为我所用。实际上实现这个Tab页界面非常简单,仅仅是通过Ajax技术偷偷的获取信息,然后在一块区域轮流显示而已(通过显示和隐藏层,或复用一个层,轮流向里边填充Html数据)。
自己的开发的代码自己最清楚,用起来也应该最顺手,要扩展的话脑子也不犯晕。代码如下,还在不断修改中。

复制代码 代码如下:

-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>



我的Tabs选项卡(Ajax版本)
















tab0 tab1 tab2











my_ajax_server.php文件:
复制代码 代码如下:

/*******************************************
* File: my_ajax_server.php
********************************************/
error_reporting(7);
set_magic_quotes_runtime(0);
$app = $_GET['app'];
switch ($app)
{
case “tab0″: //
?>
from TAB0
break;
case “tab1″: //
?>
from TAB1
break;
case “tab2″: //
?>
from TAB2
break;
default:
echo ‘my_ajax_server.php error.';
break;
}
?>

张庆(网眼) 2009-9-18
看完这篇可以参考下一篇文章 用jQuery技术实现Tab页界面之二
本文来自: 脚本之家(www.jb51.net) 详细出处参考:http://www.jb51.net/article/20091.htm
Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template