How to make tabs on the web page?


Tags: html,css,tabs

Problem :

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.



Solution :

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.


    CSS Howto..

    how to show like chat box for the div/p tag top left/right corners

    How to set my Django form on the center of the page

    How to make this Header/Content/Footer/Menu layout using CSS?

    How to style nested panel controls in ASP.NET

    Show css3 animate for 2 times

    How make something like Facebook Notifications?

    Twitter Bootstrap with responsive design — How to style own, non-framework elements [closed]

    How to apply CSS directives to h3 element?

    How to not send images to mobiles in a semantic manner

    How to get the sticky footer to work?

    How to add a css class into my function

    How can I set a border in alignment with other borders

    How to get the position of element transformed with css rotate

    How to create fluid trapezoid image with css?

    How to deselect using :not according to css property and value

    How to decode base64-encoded font information?

    How to add CSS if element has more than one child?

    How to highlight 3 line toggle button when i hover?

    How to make float : left work same as table-cell?

    How to resize trapezoid in CSS when browser window resize

    How to change tr color on mouse over when there is already implemented?

    How do I solve this IE7 margin issue?

    how to code a stickyfooter in css?

    how to create a QT plugin using Meego Touch Framework?

    How do I align two non-fixed width divs in the center of the browser screen?

    CSS radio button border how to remove it?

    Jquery/CSS: How to apply addClass with a delay of 1 sec on mouseenter event.

    How to load specific set css commands only at the first browsing of the web site?

    HTML, CSS how to make width of element always to bottom of page?

    How to make highlighted table with rowspan