Comment faire des onglets sur la page web?

Comment faire des onglets sur la page web de sorte que lors d'un clic est effectué sur l'onglet, l'onglet obtient css changé, mais sur le clic page est également de le recharger et de le css est à l'origine.

  • La première partie est relativement facile (l'onglet obtient css changé), mais je n'ai aucune idée de ce que tu veux dire par "sur le clic page est également de le recharger et de css est de retour à l'original.' Pouvez-vous préciser cela?
  • Oui dans le, cliquez sur l'onglet j'ai ajouter un peu de css de la classe et il devient différent des autres onglets, mais que l'onglet est aussi un lien, puis cliquez sur recharge la page et de la classe que j'ai ajouté est passé, et l'cliqué sur l'onglet n'est pas différent que les autres.
InformationsquelleAutor eomeroff | 2011-02-06
  1. 4

    ne pas utiliser le jquery 😀

    tout ce que vous avez besoin d'un conteneur, un données contenues dans un varable et les onglets

    le conteneur est la victime de la css changements.
    les onglets de déclencher le processus de changement.

    si vous avez un contenu statique, vous pouvez écrire cela dans une chaîne de caractères, et il suffit de le charger à partir de thiss.
    si vous avez un dinamically contenu généré, vous avez besoin pour créer une requête ajax pour obtenir le contenu frais, et puis le stocker dans la même chaîne d'attente pour charger.

    avec les onglets, il faut vous créer un générale functionusable pour le chargement du contenu.

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

    avec un contenu statique les déclencheurs:

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

    si vous souhaitez modifier le css, vous avez besoin d'une autre fonction qui ne les modifications.

    je vous le dis, ne pas utiliser le jquery, parce que vous ne savez pas ce que vous faites.

    mais thiss ensemble du code peuvent être remplacés par jquery comme ceci:

    $("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");
});

    si vous savez comment javascript fonctionne alors il est noter de mal avec le jquery, mais je vois qu'il y a de plus en plus de gens qui veulent juste faire leur site web très simple et rapide, mais ne sachant pas de quoi ils sont en train de faire et en cours d'exécution dans le même problème, encore et encore.

    • merci man, je vais essayer cela dès que je viens à mon ordinateur.
    InformationsquelleAutor Gergely Fehérvári
  2. 2

    Jquery UI Tabs:

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

    • Pourquoi sur terre serait vous importez la bibliothèque jQuery UI pour onglets? Que c'est faisable avec du CSS (certes avec quelques problèmes mineurs dans IE).
    • Oui, je propose également de jQuery UI Tabs. Ils ont un témoin de la persistance, qui va prendre soin de la reloaded/réinitialisation css problème.
    InformationsquelleAutor Thew
  3. 0

    Ont un <A href balise autour de la "onglet" et d'utiliser onClick à feu, de Javascript qui modifie le CSS.

    • fehergeri la réponse est le chemin à parcourir.
    InformationsquelleAutor Heather Herbert
  4. 0

    Si vous ne souhaitez pas utiliser Jquery pour créer des onglets de l'INTERFACE utilisateur, veuillez consulter mon cross-browser de code JavaScript: GitHub.

    • Vous pouvez utiliser différentes façons de créer des onglets et le contenu de l'onglet.
    • Le contenu de l'onglet peuvent être ajoutés uniquement lorsque l'onglet obtient le focus.
    • Vous pouvez vous souvenir de l'onglet sélectionné. Onglet sélectionné s'ouvre immédiatement après l'ouverture de la page.
    • Vous pouvez créer des onglets à l'intérieur de l'onglet.
    • Personnaliser l'arrière-plan de l'onglet est disponible.

    Exemple: Onglets

    InformationsquelleAutor Andrej