js tab选项卡 mootools tab选项卡

js tab选项卡 mootools tab选项卡

js打开或者关闭，关闭后是 mootools效果

演示

 

PHP Code

<?
    //Tabs
    $varTab = $_GET["tab"];
    if (strlen($varTab) == 0) {
        $varTab = "tab-1";
    }
    echo "<div id=\"tabs\">\n";
    echo "<ul id=\"tabs-nav\">\n";
    $arrTab = array(
        array("导航菜单","tab-1"),
        array("联动菜单","tab-2"),
        array("分页","tab-3")
    );
    for ($i = 1; $i <= count($arrTab); $i += 1) {
        echo "<li id=\"" . $arrTab[$i-1][1] . "\" class=\"tab";
        if ($arrTab[$i-1][1] == $varTab) {
            echo " active";
        }
        echo "\"><a href=\"?js=" . $_GET["js"] . "&tab=" . $arrTab[$i-1][1] . "\"><span id=\"" . $arrTab[$i-1][1] . "-loading\" class=\"tab-loading\"></span><span class=\"tab-label\">" . $arrTab[$i-1][0] . "</span></a></li>\n";
    }
    echo "</ul>\n";

    echo "<div id=\"tabs-content\">\n";
    include("tab-change.php");
    echo "</div>\n";
    echo "</div>\n";
    ?>

 tab-change.php

 

PHP Code

<?
@header("Content-type: text/html; charset=utf-8");
$varTab = $_GET["tab"];
if (strlen($varTab) == 0) {
    $varTab = "tab-1";
}

if ($varTab == "tab-1") {
    echo "<h2>PHP</h2>\n<p><a href='http://www.freejs.net/article_daohangcaidan_27.html'>纯CSS的大型下拉菜单,支持放图片在下拉导航里面</a></p>";

}
if ($varTab == "tab-2") {
    echo "<h2>JS</h2>\n<p><a href='http://www.freejs.net/article_biaodan_28.html'>ajax php二级联动菜单</a></p>";

}
if ($varTab == "tab-3") {
    echo "<h2>HTML</h2>\n<p><a href='http://www.freejs.net/article_fenye_22.html'> Jquery一页内翻页,类似于无刷新分页</a></p>";
}
?>

 

原文地址:http://www.freejs.net/article_tabbiaoqian_40.html