Visualizzazione risultati 1 fino 5 di 5

Discussione: Testo a comparsa cliccando un div

  1. #1
    Guest

    Predefinito Testo a comparsa cliccando un div

    Salve non so come scrivere su Google per cercare quello che voglio fare e quindi lo scrivo qui.

    Vorrei fare una cosa tipo questo: LINK.

    Cliccando su un div dovrebbe comparire un testo e cliccando un altro div dovrebbe comparire un altro testo.

    Grazie.

  2. #2
    L'avatar di alemoppo
    alemoppo non è connesso Staff AV
    Data registrazione
    24-08-2008
    Residenza
    PU / BO
    Messaggi
    22,145

  3. #3
    Guest

    Predefinito

    Ciao io avevo fatto questa bozza:

    Codice HTML:
    <div class="tabs-wrapper">
    
    <ul class="tabs">
    <li>
    <a href="#tab1" onclick='vai()'>AAAAAAAAAA</a></li>
    <li><a href="#tab2" onclick='vai()'>BBBBBBBBBB</a></li>
    <li><a href="#tab3" onclick='vai()'>CCCCCCCCCC</a></li>
    </ul>
    
    <div class="tabs-container">
    
    <div id="tab1" class="tab_content">
    1
    </div>
    <div id="tab2" class="tab_content">
    2
    </div>
    <div id="tab3" class="tab_content">
    3
    </div>
    
    </div>
    </div>
    Lasciamo perdere i CSS per ora che ho messo solo questo:

    Codice:
    .tab_content {
        display: none;
    }
    Come faccio in modo che quando clicco il <li> sopra compaia il div di quello che ho cliccato modificando in display: block;.

    Non so se mi sono spiegato ma ho creato questa parte. Forse in JS ma non ci capisco molto.

  4. #4
    L'avatar di alemoppo
    alemoppo non è connesso Staff AV
    Data registrazione
    24-08-2008
    Residenza
    PU / BO
    Messaggi
    22,145

    Predefinito

    Sì, è in javascript. Nel link era mostrato come cambiare il contenuto. Se vuoi invece modificare una caratteristica CSS, dovresti farlo sempre con DOM ma modificando la proprietà style.

    Ciao!

  5. #5
    Guest

    Predefinito

    Ho creato questo file javascript e incluso nella index:

    Codice:
    <script type='text/javascript' src='/custom.js'></script>
    Dove ho messo al suo interno questo codice:

    Codice:
    ////////////////////////////// Tabs /////////////////////////////////////
    	jQuery('.tabs-wrapper').each(function() {
    		jQuery(this).find(".tab_content").hide(); //Hide all content
    		jQuery(this).find("ul.tabs li:first").addClass("active").show(); //Activate first tab
    		jQuery(this).find(".tab_content:first").show(); //Show first tab content
    	});
    	jQuery("ul.tabs li").click(function(e) {
    		jQuery(this).parents('.tabs-wrapper').find("ul.tabs li").removeClass("active"); //Remove any "active" class
    		jQuery(this).addClass("active"); //Add "active" class to selected tab
    		jQuery(this).parents('.tabs-wrapper').find(".tab_content").hide(); //Hide all tab content
    
    		var activeTab = jQuery(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
    		jQuery(this).parents('.tabs-wrapper').find(activeTab).fadeIn(); //Fade in the active ID content
    		
    		e.preventDefault();
    	});
    	jQuery("ul.tabs li a").click(function(e) {
    		e.preventDefault();
    	})
    E' collegato al codice sopra, ma non funziona. Devo attivare qualcosa o modificare qualcosa?

    Il codice l'ho trovato online. Grazie.

    EDIT: Risolto avevo sbagliato ad incollare il codice.
    Ultima modifica di kolop : 05-11-2018 alle ore 16.27.34

Regole di scrittura

  • Non puoi creare nuove discussioni
  • Non puoi rispondere ai messaggi
  • Non puoi inserire allegati.
  • Non puoi modificare i tuoi messaggi
  •