js tab选项卡 mootools tab选项卡-freejs.net代码演示

首页>>TAB标签>>js tab选项卡 mootools tab选项卡(2013-09-22)

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>";
}
?>