tabs dinamiche

[sidvizioso]

ciao a tutti, in giro si trovano alcuni esempi di tabs che al click switchano un div ma sono alcuni troppo pesanti perchè usano framework come mootools o jquery ecc ecc oppure sono troppo complessi da modificare e quindi diffocoltosi da modificarnew il css a seconda delle proprie necessità.

quindi vorrei sapere se esiste un modo semplice per switchare i contenuti di due div, ad esempio:

al caricamento della pagina il div n°1 è quello visibile di default ma cliccando sul pulksante del div n°2 viene fuori il contenuto del secondo div nascondendo il primo e viceversa, ovviamente con rollover su questi tasti..

spero in un aiutoi o almeno spero mi possiateindirizzare su come poter creare un piccolo script adatto alle mie esigenze.

grazie

[Nick.ferro]

JQUERY PESANTE????

[sidvizioso]

ho detto una minchiata lo so, in realtà è che uso già per alcuni effetti MooTools e quindi non volevo usare altri framework.

Poi con mootools ho trovato quello che cerco, MooTabs, ma a me serve una cosa semplice e banale senza effetti di transizione ecc.

praticamente vorrei creare tipo uno script che all'onload visualizzi il primo div enasconda il secondo e poi ad evento click eseguire l'effettivo switch dei contenuti...

è una cosa semplicew dafareda zero?

[The Captain]

http://www.dynamicdrive.com/dynamici...tabcontent.htm

o con AJAX: http://www.dynamicdrive.com/dynamici...tent/index.htm

[artorius]

beh, in verità non vedo la pesantezza di 64Kb di script, comunque, puoi sempre (sul sito di Mootools) indicare cosa ti serve e per qeusto ti basta il core e gli element.

Detto ciò

crea una struttura tipo:

<div id="tot">
    <div id="header">
        <ul  class="tabs-header">
            <a href="#" onclick="change('uno')">
                [*]
                    Uno
                
            </a>
            <a href="#" onclick="change('due')">
                [*]
                    Due
                
            </a>
        [/list]
    </div>
    <div id="content">
        <div class="tabs" id="uno">
            <h1>Contenuto 1</h1>
            askjbdsjkbjkbgfkjbagkjakjasfgbbz

            askjbdsjkbjkbgfkjbagkjakjasfgbbz

            askjbdsjkbjkbgfkjbagkjakjasfgbbz

            askjbdsjkbjkbgfkjbagkjakjasfgbbz

        </div>
        <div class="tabs" id="due">
            <h1>Contenuto 2</h1>
            askjbdsjkbjkbgfkjbagkjakjasfgbbz

            askjbdsjkbjkbgfkjbagkjakjasfgbbz

            askjbdsjkbjkbgfkjbagkjakjasfgbbz

            askjbdsjkbjkbgfkjbagkjakjasfgbbz

        </div>
    </div>
</div> 

Con CSS

<style type="text/css">
            #tot{
                width: 800px;
                margin: 50px auto 0px auto;
            }
            
            #header{
                width: 100%;
                height: 20px;
                float: left;
            }
            
            #content{
                width: 100%;
                height: auto;
                float: left;
                border: 1px solid silver;
                background-color: #FFE87C;
            }
            
            .tabs-header{
                list-style: none;
                margin: 0px;
                padding: 0px;
            }
            
            .tabs-header li{
                width: 100px;
                height: 20px;
                float:left;
                text-align: center;
                border-top: 1px solid silver;
                border-left: 1px solid silver;
                border-right: 1px solid silver;
                
            }
            
            .tabs-header li.active{
                background-color: #FFE87C;
            }
            
            .tabs{
                width: 100%;
                float: left;
                display: none;
            }
</style> 

e Javascript

var active = 'uno';
window.onload = function(){
    change(active);
}

function change(id)
{
    var el = document.getElementById('content');
    var divs = el.getElementsByTagName('div');
    var index = 0;
    for(i = 0; i < divs.length; i++)
    {
        if(divs[i].id == id)
        {
            divs[i].style.display = 'block';
            index = i;
        }
        else
        {
            divs[i].style.display = 'none';
        }
    }
    
    el = document.getElementById('header');
    var lis = el.getElementsByTagName('li');
    for(i = 0; i < lis.length; i++)
    {
        if(i == index)
        {
            lis[i].className = 'active';
        }
        else
        {
            lis[i].className = '';
        }
    }
} 

Dovrebbe funzionare

[sidvizioso]

perfetto è proprioquelche mi serviva!! un semplicissimo script del genere!!

ti ringrazio artorius


cmq una cosa: lo script funziona per su IE e con Firebug mi da alcuni errori del javascript:

el has no properties
change("tabuno")# (line 61)
onload()# (line 39)
[Break on this error] var lis = el.getElementsByTagName('LI');


ma in generale ogniv olta che clicco mi da lo stesso errore

el has no properties
change("tabdue")# (line 61)
onclick(click clientX=0, clientY=0)# (line 1)
[Break on this error] var lis = el.getElementsByTagName('LI');

[sidvizioso]

no scusate errore mio. mi ero mangiato una lettera di un tag :P

funziona alla grande!!!

grazie mille