如何在html中创建包含4个选项卡的菜单，在一个页面上显示内容？

我需要创建一个带有4个选项卡的网页。按下一个选项卡，相关内容应显示在整个页面上，并且适用于所有选项卡。我的意思是，当用户按下一个选项卡时，它将显示链接到该选项卡的内容，并隐藏另一个选项卡的内容。如何在HTML和CSS中实现它

Jquery UI为此提供了现成的解决方案：

---

虽然它不是一个纯粹的HTML和CSS解决方案，但我不确定您是否能够在没有某种形式的脚本编写的情况下完成它。

我用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事件的元素中调用这些函数。基本上，我正在将所选选项卡的显示属性更改为“块”，并将其他选项卡的显示属性更改为“无”。 现在，我有4个标签，但我无法想象如果超过10个标签，我需要多少代码

---

谢谢，

您可以使用CSS/javascript，通过更改页面（作为div）的

z-index

onclick

。这将使一个在另一个之前

只需创建一个包含所有选项卡的div，然后为每个选项卡创建具有不同ID的div

从所有具有

z-index:0的页面div开始，除了home div，它具有
z-index:1

每个选项卡都有一个
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";
}

功能下一页（pageid）{
//查找最高的z索引。可能需要自定义
var elements=document.getElementsByTagName（“*”）；
风险价值最高指数=0；
对于（var i=0；i最高的索引）{
最高的索引=parseInt（元素[i].style.zIndex；
}
}
var最高指数=最高指数+1；
//将选项卡页面的z索引设置为最高+1
getElementByid（pageid）.object.style.zIndex=“1”；
}
这是我的问题的最终解决方案：

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

功能显示（showEl）{
var元素=新数组（“tahsilatlarIcerik”、“faturaTabGraf”、“odemeIcerik”、“kasaIcerik”）；
对于（var i=0；i

基本上，我创建了一个包含元素id的数组，并使用2个函数对其进行操作。函数在选项卡内部调用，例如，
Fatura Analizi
。我希望这会对某些人有所帮助。
#宏，而不是您的响应。宏，谢谢您的响应。问题是我没有太多时间尝试让我我知道如何在javascript中隐藏/显示html元素。我的问题更多的是网页设计。因为我将在几乎所有基于选项卡的内容中放置GriedView和图表，我只需要找出如何制作它。我在网上找到了属性，如果我在多个表标记中将其设置为自动，并使用changi的显示属性如果你有更好的主意，我会很感激的。JQuery控件非常容易使用，只需在它自己的DIV中创建每个tba（任何内容都可以放在其中），然后在页面上的脚本块中调用构造函数