Visualizzazione dei risultati da 1 a 3 su 3
  1. #1
    Utente di HTML.it L'avatar di goat
    Registrato dal
    Apr 2003
    Messaggi
    1,154

    JS per gestione tab menu diversi: se 1 funziona; se 2 no.

    Ciao,
    con il seguente Javascript vorrei gestire dei menù a tab. Cliccando su ogni tab si visualizza il contenuto corrispondente:

    Codice PHP:
    $(document).ready(function(){
        
        $(
    ".conttab").hide();
        
    id = $("#tabmenu .sel").attr('slide');
        $(
    id).show();
        
        $(
    ".link-tab").click(function(){
            
    id = $(this).attr('slide');
            $(
    '#tabmenu li').removeClass("sel");
             $(
    this).addClass("sel");
            $(
    ".conttab").hide();
            $(
    id).show();
        });

        $(
    ".conttab2").hide();
        
    id = $("#tabmenu2 .sel").attr('slide');
        $(
    id).show();
        
        $(
    ".link-tab2").click(function(){
            
    id = $(this).attr('slide');
            $(
    '#tabmenu2 li').removeClass("sel");
             $(
    this).addClass("sel");
            $(
    ".conttab2").hide();
            $(
    id).show();
        });
        
    }); 
    La cosa strana è che se sulla stessa pagina ho sia "#tabmenu" che "#tabmenu2"... ecco che la cosa smette di funzionare. Dove sbaglio?
    Eppure classi e id varie hanno tutti nomi differenti, tra i due html.

    Qualche idea?

    Grazie,
    goat
    "Qualunque impressione faccia su di noi, egli è un servo della legge, quindi appartiene alla legge e sfugge al giudizio umano."

  2. #2
    Moderatore di Annunci siti web, Offro lavoro/collaborazione, Cerco lavoro L'avatar di cavicchiandrea
    Registrato dal
    Aug 2001
    Messaggi
    26,133
    Perché gli ID (#tabmenu/#tabmenu2) devono essere univoci inserendone due smette di funzionare perché si "confonde", soluzione cambiare ID
    Cavicchi Andrea
    Problemi con javascript, jquery, ajax clicca qui

  3. #3
    Utente di HTML.it L'avatar di goat
    Registrato dal
    Apr 2003
    Messaggi
    1,154
    La questione è stata risolta così:

    Codice PHP:
    $(document).ready(function(){
        var 
    tab1 document.getElementById("tabmenu");
        if(
    tab1!=null) {
            $(
    ".conttab").hide();
            
    id = $("#tabmenu .sel").attr('slide');
        
            $(
    id).show();
            
            $(
    ".link-tab").click(function(){
                
    id = $(this).attr('slide');
                $(
    '#tabmenu li').removeClass("sel");
                 $(
    this).addClass("sel");
                $(
    ".conttab").hide();
                $(
    id).show();
            });
        }
        var 
    tab2 document.getElementById("tabmenu2");
        if(
    tab2!=null) {
            $(
    ".conttab2").hide();
            
    id2 = $("#tabmenu2 .sel").attr('slide');
            $(
    id2).show();
            
            $(
    ".link-tab2").click(function(){
                
    id2 = $(this).attr('slide');
                $(
    '#tabmenu2 li').removeClass("sel");
                 $(
    this).addClass("sel");
                $(
    ".conttab2").hide();
                $(
    id2).show();
            });
        }
        
            
    }); 
    Con l'html del il primo tab (#tabmenu) che si presenta così:

    Codice PHP:
    <ul id="tabmenu">
        <
    li slide="#contenuto1" class="link-tab sel">[url="#null"]LINK1[/url]
        <
    li slide="#contenuto2" class="link-tab">[url="#null"]LINK2[/url][/list]

    <
    div id="contenuto1" class="conttab">
        ...
    </
    div>

    <
    div id="contenuto2" class="conttab">
        ...
    </
    div
    Prendetene ed usatene tutti.
    goat
    "Qualunque impressione faccia su di noi, egli è un servo della legge, quindi appartiene alla legge e sfugge al giudizio umano."

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2025 vBulletin Solutions, Inc. All rights reserved.