html - 1 つのページにコンテンツを表示する 4 つのタブを持つ HTML でメニューを作成するにはどうすればよいですか?

Question

4 つのタブを持つ 1 つの Web ページを作成する必要があります。タブを押すと、関連するコンテンツがページ全体に表示され、すべてのタブで機能するはずです。つまり、ユーザーが 1 つのタブを押すと、そのタブにリンクされるコンテンツが表示され、別のタブのコンテンツが非表示になります。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ページの (div として) を変更することにより、CSS/javascript でそれを行うことができますonclick。これにより、一方が他方の前に表示されます。

すべてのタブを含む div を作成し、それぞれに異なる ID を持つ div を作成します。

z-index:0;を持つホーム div を除いて、すべてを持つページ 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";
}