How to make tabs on the web page?

Question

How to make tabs on the web page so that when click is performed on the tab, the tab gets css changed, but on the click page is also reloaded and the css is back to original.

Answer 1

dont use the jquery :D

all of what you needs a container, a contained data in a varable and the tabs

the container is the victim of the css changes. the tabs will trigger the changing process.

if you have a static content, you can write this into a string, and simply load it from thiss. if you have a dinamically generated content, you need to create ajax request to get the fresh content, and then store it in the same string waiting for load.

with the tabs you sould create a general functionusable for content loading.

function load(data) {
    document.getElementById("victim").innerHTML = data;
}

function changeCss(element) {
//redoing all changes
document.getElementById("tab1").style.background="#fff";
document.getElementById("tab2").style.background="#fff";

element.style.background = "#f0f";
}

with static content the triggers:

document.getElementById("tab1").onclick = function() {load("static data 1");changeCss(document.getElementById("tab1"))};
document.getElementById("tab2").onclick = function() {load("static data 2");changeCss(document.getElementById("tab2"))};

if you want to change the css, you need another function which do the changes.

i tell you dont use the jquery because you will not know what are you doing.

but thiss whole code can be replaced by jquery like this:

$("tab1").click(function(e) {
    $("#tab1 | #tab2").each(function() {
    $(this).css("background","#fff"); });
    $(this).css("background","#00f");
    $("#victim").append("static content 1");
});


$("tab12click(function(e) {
    $("#tab1 | #tab2").each(function() {
    $(this).css("background","#fff"); });
    $(this).css("background","#00f");
    $("#victim").append("static content 2");
});

if you know how javascript works then there is noting wrong with the jquery, but i see there is more and more people who just want to do their website very fast and simple, but not knowing what are they doing and running into the same problem again and again.