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

Question

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

Answer 1

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

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

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

Answer 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>. 我希望这对某人有帮助。

Answer 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 个选项卡，我需要多少代码。

谢谢，

Answer 4

您可以通过更改z-indexes页面的 (as divs)来使用 CSS/javascript 来实现onclick。这将使一个在另一个前面。

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

从所有具有 的页面 div 开始z-index:0;，除了主页 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";
}