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

[goat]

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

$(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

[cavicchiandrea]

Perché gli ID (#tabmenu/#tabmenu2) devono essere univoci inserendone due smette di funzionare perché si "confonde", soluzione cambiare ID

[goat]

La questione è stata risolta così:

$(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ì:

<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