js tab选项卡 mootools tab选项卡

最新推荐文章于 2021-04-14 02:54:20 发布

iteye_19312

最新推荐文章于 2021-04-14 02:54:20 发布

阅读量161

点赞数

文章标签： php javascript ViewUI

本文介绍使用PHP和MooTools实现的选项卡效果，包括导航菜单、联动菜单及分页功能，通过不同URL参数展示相应的选项卡内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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