如何在 HTML/CSS/JavaScript 中制作多级选项卡式窗格？

Question

我想为我的 PHP 前端制作多级选项卡式窗格。

我想实现这样的目标：

_______|TAB1||Tab2||Tab3|________________________________
___________|子选项卡1||子选项卡2|___________
| Content of Sub Tab 1 of Tab1 |
| Content of Sub Tab 1 of Tab1 |
| Content of Sub Tab 1 of Tab1 |
| Content of Sub Tab 1 of Tab1 |

同样，当我单击 Tab1 的 Sub tab2 时，它应该显示其内容。 现在，当我单击 Tab 2 时，它应该默认显示其 subtab11 的内容，当我单击 Tab2 的 SubTab2 时，它应该显示其内容。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
        <head><title>Tab-View Sample</title>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
        <meta name="description" content="" />
        <meta name="keywords"    content="" />
        <link rel="stylesheet" type="text/css" href="tab-view.css" />
    </head>

    <body>
        <?php $id = isset($_GET['id']) ? $_GET['id'] : 1;
            $ida = isset($_GET['ida']) ? $_GET['ida'] : 11;
        ?>
        <div class="TabView" id="TabView">
            <!-- ***** Tabs ************************************************************ -->
            <div class="Tabs" style="width: 452px;">
              <a <?=($id == 1) ? 'class="Current"' : 'href="sample.php?id=1"';?>>Tab 1</a>
              <a <?=($id == 2) ? 'class="Current"' : 'href="sample.php?id=2"';?>>Tab 2</a>
              <a <?=($id == 3) ? 'class="Current"' : 'href="sample.php?id=3"';?>>Tab 3</a>
            </div>

            <!-- ***** Pages *********************************************************** -->
            <div class="Pages">
                <div class="Page" style="display: <?=($id == 1 && $ida == 11) ? 'block' : 'none';?>">
                    <div class="Pad">
                        <div class="Tabs" style="width: 452px;">
                            <a <?=($ida == 11) ? 'class="Current"' : 'href="sample.php?id=1&ida=11"';?>>Tab 1</a>
                            <a <?=($ida == 12) ? 'class="Current"' : 'href="sample.php?id=1&ida=12"';?>>Tab 2</a>
                        </div>

                        <div class="Pages">
                            <div class="Page" style="display: <?=($ida == 11) ? 'block' : 'none';?>">
                                <div class="Pad">
                                    Hello World Tab 11!!!
                                </div>
                            </div>
                        </div>
                        <div class="Pages">
                            <div class="Page" style="display: <?=($ida == 12) ? 'block' : 'none';?>">
                                <div class="Pad">
                                    Hello World Tab 12!!!
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="Page" style="display: <?=($id == 2) ? 'block' : 'none';?>">
                    <div class="Pad">
                        <? odbc_result_all($cur,"border=1"); ?>
                    </div>
                </div>

                <div class="Page" style="display: <?=($id == 3) ? 'block' : 'none';?>">
                    <div class="Pad">
                        <?
                        foreach($arr as $val)
                        {
                            echo($val.'<br>');
                        }
                        ?>
                    </div>
                </div>
            </div>

            <div class="footer">Copyright 1999-2005 by Refsnes Data.</div>
        </div>


        <div class="TabView1" id="TabView1">
            <!-- ***** Tabs ************************************************************ -->
            <div class="Tabs" style="width: 452px;">
              <a <?=($id == 4) ? 'class="Current"' : 'href="sample.php?id=4"';?>>Tab 4</a>
              <a <?=($id == 5) ? 'class="Current"' : 'href="sample.php?id=5"';?>>Tab 5</a>
              <a <?=($id == 6) ? 'class="Current"' : 'href="sample.php?id=6"';?>>Tab 6</a>
            </div>

            <!-- ***** Pages *********************************************************** -->
            <div class="Pages">
                <div class="Page" style="display: <?=($id == 4) ? 'block' : 'none';?>">
                    <div class="Pad">
                        Hello India!!!
                    </div>
                </div>

                <div class="Page" style="display: <?=($id == 5) ? 'block' : 'none';?>">
                    <div class="Pad">
                        <? odbc_result_all($cur,"border=1"); ?>
                    </div>
                </div>

                <div class="Page" style="display: <?=($id == 6) ? 'block' : 'none';?>">
                    <div class="Pad">
                        <?
                        foreach($arr as $val)
                        {
                            echo($val.'<br>');
                        }
                        ?>
                    </div>
                </div>
            </div>

            <div class="footer">Copyright 1999-2005 by Refsnes Data.</div>
        </div>

        <script type="text/javascript" src="tab-view.js"></script>
        <script type="text/javascript">
            tabview_initialize('TabView');
            tabview_initialize('TabView1');
        </script>
    </body>
</html>

我想通过这段代码实现多级标签。 它显示正确，但是当我单击其中一个子选项卡时，它会出现错误：

“找不到对象”

Answer 1

作为一个简单的例子，你可以使用 <a href="javascript:;" onclick="show(1)">，其中 1 是每个选项卡的选项卡编号。

然后为这些部分制作特殊的命名标签：

<div id="div1">section 1</div>
<div id="div2">section 2</div>
...

和一个改变可见性的脚本：

function show(number) {
    document.getElementById("div2").style.display='none'
    document.getElementById("div2").style.display='none'
    ...
    document.getElementById("div"+number).style.display='block'
}

您应该能够对子部分选项卡执行相同操作，因为隐藏元素的子元素是隐藏的。

Answer 2

http://flowplayer.org/tools/tabs/index.html

最后我使用这个库文件来完成我的工作。

感谢大家的意见、回复和建议。 :)

如何在 HTML/CSS/JavaScript 中制作多级选项卡式窗格？

问题描述

2 个解决方案

解决方案1
1 2011-07-12 07:39:49

解决方案2
0 已采纳 2011-10-13 19:21:02

如何在 HTML/CSS/JavaScript 中制作多级选项卡式窗格？

问题描述

2 个解决方案

解决方案1 1 2011-07-12 07:39:49

解决方案2 0 已采纳 2011-10-13 19:21:02

解决方案1
1 2011-07-12 07:39:49

解决方案2
0 已采纳 2011-10-13 19:21:02