Question

我想为我的PHP前端制作多级标签窗格。

我想实现这样的目标：

_______ | TAB1 || Tab2 || Tab3 | ________________________________
  ___________ | SUB TAB1 || Sub Tab2 | _____________________
  | 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＆amp;的内容。当我点击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

举个简单的例子，您可以使用＆lt; a href =“javascript：;” onclick =“show（1）”＆gt;，其中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

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

感谢大家的意见，回复＆amp;建议。：）

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

2 个答案: