Question

I need to create one single web page with 4 tab. By pressing on a tab the relevant content should display on the whole page and that should work for all tabs. I mean, when user press on one tab it will display content which will be linked to that tab and hide another tab’s content. How can I do it in HTML and CSS?

Answer 1

This is my final solution to my problem:

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

Basically, I’ve created an Array with elements id’s inside and manipulate them with 2 function. Functions are called inside of tabs, e.g., <a id="faturaMenu" onclick="show('faturaTabGraf')">Fatura Analizi</a>. I hope this will be helpfull to someone.