如何在 html 中创建带有 4 个选项卡的菜单，该菜单将在一页上显示内容？

Posted 2023-02-16

【中文标题】如何在 html 中创建带有 4 个选项卡的菜单，该菜单将在一页上显示内容？

【英文标题】：How do I create menu in html with 4 tab which will display content on one single page?

【发布时间】：2012-04-20 16:03:53

【问题描述】：

我需要创建一个带有 4 个标签的网页。通过按标签，相关内容应显示在整个页面上，并且适用于所有标签。我的意思是，当用户按下一个选项卡时，它将显示将链接到该选项卡的内容并隐藏另一个选项卡的内容。我怎样才能在 html 和 CSS 中做到这一点？

【参考方案1】：

Jquery UI 有一个开箱即用的解决方案：

http://jqueryui.com/demos/tabs/

虽然它不是一个纯粹的 HTML 和 CSS 解决方案，但我不确定你是否能够在没有某种形式的脚本的情况下做到这一点

【讨论】：

#Macros，谢谢你的回复。

宏，谢谢您的回复。问题是我没有太多时间尝试使用 jquery 来制作它。我知道如何在 javascript 中隐藏/显示 html 元素。我的问题更多是网页设计。因为我会将 GriedViews 和 Charts 放在几乎每个基于标签的内容中，所以我只需要弄清楚如何制作它。我在网上找到了 属性，如果我在多个表格标签中将其设置为自动并通过将其更改为 display:none 或 display:table 来使用显示属性，我可以管理它。但如果您有更好的想法，我将不胜感激。

JQuery 控件非常易于使用，只需在自己的 DIV 中创建每个 tbas（任何内容都可以放入其中），然后在页面上的脚本块中调用构造函数

【参考方案2】：

这是我的问题的最终解决方案：

 function show(showEl) 
        var elements = new Array("tahsilatlarIcerik", "faturaTabGraf", "odemeIcerik", "kasaIcerik");
        for (var i = 0; i < elements.length; i++) 
            if (showEl == elements[i]) 
                document.getElementById(showEl).style.display = "block";
            
            else 
                hide(elements[i]);
            
        
    

    function hide(hideEl) 
        if (document.getElementById(hideEl).style.display != "") 
            document.getElementById(hideEl).style.display = "none";
        
    

基本上，我创建了一个包含元素 id 的数组，并使用 2 个函数来操作它们。函数在选项卡内调用，例如<a id="faturaMenu" onclick="show('faturaTabGraf')">Fatura Analizi</a>。我希望这对某人有所帮助。

【参考方案3】：

我用 javascript 代码解决了问题。我正在发布它，我想知道是否还有另一个， 少编码的方法是什么？据我研究，我发现javascript中不支持同时声明和分配全局变量，你知道还有其他简单的方法吗？

和代码：

        function getFatura() 
        var tahsilatId = document.getElementById("tahsilatlarIcerik");
        var faturaTabloId = document.getElementById("faturaTabloIcerik");
        var faturaGrafikId = document.getElementById("faturaGrafikIcerik");
        var odemelerId = document.getElementById("odemeIcerik");
        var kasaId = document.getElementById("kasaIcerik");

        faturaTabloId.style.display = "block";
        faturaGrafikId.style.display = "block";
        tahsilatId.style.display = "none";
        odemelerId.style.display = "none";
        kasaId.style.display = "none";
    

    function getTahsilatlar() 
        var tahsilatId = document.getElementById("tahsilatlarIcerik");
        var faturaTabloId = document.getElementById("faturaTabloIcerik");
        var faturaGrafikId = document.getElementById("faturaGrafikIcerik");
        var odemelerId = document.getElementById("odemeIcerik");
        var kasaId = document.getElementById("kasaIcerik");

        faturaTabloId.style.display = "none";
        faturaGrafikId.style.display = "none";
        tahsilatId.style.display = "block";
        odemelerId.style.display = "none";
        kasaId.style.display = "none";
    

    function getOdemeler() 
        var tahsilatId = document.getElementById("tahsilatlarIcerik");
        var faturaTabloId = document.getElementById("faturaTabloIcerik");
        var faturaGrafikId = document.getElementById("faturaGrafikIcerik");
        var odemelerId = document.getElementById("odemeIcerik");
        var kasaId = document.getElementById("kasaIcerik");

        faturaTabloId.style.display = "none";
        faturaGrafikId.style.display = "none";
        tahsilatId.style.display = "none";
        odemelerId.style.display = "block";
        kasaId.style.display = "none";
    
    function getKasa() 
        var tahsilatId = document.getElementById("tahsilatlarIcerik");
        var faturaTabloId = document.getElementById("faturaTabloIcerik");
        var faturaGrafikId = document.getElementById("faturaGrafikIcerik");
        var odemelerId = document.getElementById("odemeIcerik");
        var kasaId = document.getElementById("kasaIcerik");

        faturaTabloId.style.display = "none";
        faturaGrafikId.style.display = "none";
        tahsilatId.style.display = "none";
        odemelerId.style.display = "none";
        kasaId.style.display = "block";
    

我在带有 onclick 事件的元素中调用这些函数。基本上我将所选选项卡的显示属性更改为 BLOCK，并将其他选项卡的显示属性更改为 NONE。 现在，我有 4 个选项卡，但我无法想象如果超过 10 个选项卡，我需要多少代码。

谢谢，

【参考方案4】：

您可以使用 CSS/javascript 通过更改页面的 z-indexes（作为 div）onclick 来实现。这会将一个放在另一个前面。

只需要一个包含所有选项卡的 div，然后为每个选项卡设置不同 id 的 div。

从所有具有z-index:0; 的页面div 开始，除了主页div 具有z-index:1;。

每个tab都有一个onclick="nextpage('page1')（把page1改成对应页面的id）。

然后在 javascript 中，放置以下代码：

function nextpage(pageid) 
    //Find the highest z-index. May need to be customized
    var elements = document.getElementsByTagName("*");
    var highest_index = 0;
    for (var i = 0; i < elements.length - 1; i++) 
        if (parseInt(elements[i].style.zIndex) > highest_index) 
        highest_index = parseInt(elements[i].style.zIndex;
        
    
    var highest_index_1 = highest_index + 1;
    //set the z index of the tab-page to the highest+1
    getElementByid(pageid).object.style.zIndex="1";