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

发布于 2024-11-19 14:25:33 字数 6338 浏览 8 评论 0原文

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

我想实现这样的目标：

_______|选项卡1||选项卡2||选项卡3|________________________________
___________|子选项卡1||子选项卡2|_____________________
|Tab1 的子选项卡 1 的内容 |
|Tab1 的子选项卡 1 的内容 |
|Tab1 的子选项卡 1 的内容 |
|Tab1 的子选项卡 1 的内容 |
<小时>

同样，当我单击 Tab1 的 Sub tab2 时，它应该显示其内容。现在，当我单击选项卡 2 时，它应该默认显示其子选项卡 11 和 2 的内容。当我单击 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>

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

“未找到对象”

原文

I want to make multilevel tabbed panes for my PHP frontend.

I want to achieve something like this:

_______|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 |

Similarly, when I click on Sub tab2 of Tab1 it should show its content. Now when I click Tab 2, it should by default display contents of its subtab11 & when I click SubTab2 of Tab2, it should display its content.

<!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>

I want to achieve multilevel tabs through this code. It is displaying correctly, but when I click on one of the subtabs, it gives an error:

"Object not found"

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

爱本泡沫多脆弱 2024-11-26 14:25:33

作为一个简单的示例，您可以使用，其中 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'
}

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

As a simple example, you could use <a href="javascript:;" onclick="show(1)">, where 1 is the tab number, for each tab.

Then make special named tags for the sections:

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

and a script to change visibility:

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

You should be able to do the same for the sub-section tabs, since a sub-element of a hidden element is hidden.

回复收藏 0 原文