Heim  >  Artikel  >  Web-Frontend  >  Tab页界面 用jQuery及Ajax技术实现(php后台)_jquery

Tab页界面 用jQuery及Ajax技术实现(php后台)_jquery

WBOY
WBOYOriginal
2016-05-16 18:00:54998Durchsuche

网上的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;
}
?>
Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn