Skryti/zobrazení textu - pomoc s nastavením – JavaScript, AJAX, jQuery – Fórum – Programujte.com
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu
Reklama
Reklama

Skryti/zobrazení textu - pomoc s nastavením – JavaScript, AJAX, jQuery – Fórum – Programujte.comSkryti/zobrazení textu - pomoc s nastavením – JavaScript, AJAX, jQuery – Fórum – Programujte.com

 

Hledá se programátor! Plat 1 800 € + bonusy (firma Boxmol.com)
mephcz
~ Anonymní uživatel
2 příspěvky
24. 7. 2012   #1
-
0
-

Přeji dobrý den,
na stránce mám požitý skript na skrytí/zobrazení textu:

<head>
    <script type="text/javascript">
  function SwitchElementVisibility (AName)
  {
    var xElement;
    xElement = document.getElementById(AName);

    if (xElement.style.display == 'block'){
      xElement.style.display = 'none';
    } else {
      xElement.style.display = 'block';
    }
  }
</script>
</head>

a ve stránce potom:

<a href="#" onclick="SwitchElementVisibility('div_dil_01'); return(false);">zobrazit/skrýt</a>

<div style="display: none;" id="div_dil_01">skryty obsah</div>

vše funguje jak má, ale mám jeden požadavek který by mi ušetřil případné komplikace:


potřebuji aby při použití hide/unhide bylo předchozí hide/unhide automaticky schováno = vždy může být odkryto pouze jedeno textové pole né více najednou a odkrytí dalšího automaticky skryje aktuálně otevřené.


Předem díky za pomoc.


Daniel

Nahlásit jako SPAM
IP: 81.91.219.–
Reklama
Reklama
Nefaritus
~ Redaktor
+2
Posthunter
24. 7. 2012   #2
-
0
-

Můžeš dát všem těm divům stejnou classu a než pomocí toho getElementById() některý zobrazíš, tak je pomocí getElementByClassName() všechny skryješ:

document.getElementByClassName('class').style.display = 'none';
Nahlásit jako SPAM
IP: 109.238.43.–
mephcz
~ Anonymní uživatel
2 příspěvky
24. 7. 2012   #3
-
0
-

přeji dobrý den, díska za reakci ale už se mi to podařilo na forech vypídit a funkčně implementovat níže přikládám zdrojáky:

k href="favicon.png" rel="icon" type="image/png" />
    <!-- This website template was downloaded from http://www.nuviotemplates.com - visit us for more templates -->
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta http-equiv="content-language" content="cz" />
    <meta name="robots" content="all,follow" />

    <meta name="author" lang="en" content="All: Your website name [www.your-website.com]; e-mail: info@your-website.com" />
    <meta name="copyright" lang="en" content="webdesign: Vit Dlouhy [Nuvio - www.nuvio.cz; NuvioTemplates - www.nuviotemplates.com]; e-mail: hello@nuviotemplates.com" />

    <meta name="description" content="..." />
    <meta name="keywords" content="..." />
    
    <link rel="stylesheet" media="screen,projection" type="text/css" href="css/main.css" />
    <!--[if lte IE 6]><link rel="stylesheet" type="text/css" href="css/main-msie.css" /><![endif]-->
    <link rel="stylesheet" media="screen,projection" type="text/css" href="css/scheme.css" />
    <link rel="stylesheet" media="print" type="text/css" href="css/print.css" />

    <title>Trochá zábavy neuškodí</title>
    <script type="text/javascript">
	 function MyFunction(divName){
        
        //hidden val
        var hiddenVal = document.getElementById("tempDivName"); 
        
        //hide old
        if(hiddenVal.Value != undefined){
            var oldDiv = document.getElementById(hiddenVal.Value); 
            oldDiv.style.display = 'none'; 
        }
        
        //show div
            var tempDiv = document.getElementById(divName); 
            tempDiv.style.display = 'block';              
        
        //save div ID
            hiddenVal.Value = document.getElementById(divName).getAttribute("id");
                
        }
  function SwitchElementVisibility (AName)
  {
    var xElement;
    xElement = document.getElementById(AName);

    if (xElement.style.display == 'block'){
      xElement.style.display = 'none';
    } else {
      xElement.style.display = 'block';
    }
  }
</script>

a v textu:

<input id="tempDivName" type="hidden" />
<a href="#" onclick="MyFunction('div_dil_01');">zobrazit</a>
<a href="#" onclick="MyFunction('div_dil_02');">zobrazit</a>



<div style="display: none;" id="div_dil_01">skryty text </div>
<div style="display: none;" id="div_dil_02">skryty text </div>
Nahlásit jako SPAM
IP: 81.91.219.–
Vasek
~ Anonymní uživatel
166 příspěvků
30. 11. 2012   #4
-
0
-

#3 mephcz
Díky moc, perfektně to běhá....

Nahlásit jako SPAM
IP: 93.92.55.–
Milan
~ Anonymní uživatel
267 příspěvků
20. 10. 2016   #5
-
0
-

#1 mephcz

Dobrý den,

mám menší dotaz. Používám tento script a chci se zeptat, jak docílit toho, že první div bude zobrazen vždy, ale pokud si kliknu na druhý button, tak se tento první div skreje a zobrazí se na jeho místě obsah druhého divu.

Děkuji za pomoc.

Nahlásit jako SPAM
IP: 2a00:1028:96c4:248e:6550:...–
peter
~ Anonymní uživatel
2539 příspěvků
20. 10. 2016   #6
-
0
-

po kliku
1. vse skryjes
2. zobrazis div, ktery te zajima

mimochodem, da se to prepsat
 

function SwitchElementVisibility (AName)
  {
    var xElement;
    xElement = document.getElementById(AName);

    if (xElement.style.display == 'block'){
      xElement.style.display = 'none';
    } else {
      xElement.style.display = 'block';
    }
  }

// ----

function SwitchElementVisibility (id)
  {
    var el;
    el = document.getElementById(id);
    if (!el) return;
    el.style.display = el.style.display!='none' ? 'none' : '';
  }
// porovnavat na block je nesmysl, protoze obecne to nemusi mit block v css, ale treba inline, table, table-row, inline-block a pod
// pokud el neexistuje, tak prohlizec umi zkapat na chybe pri pokusu nastavit//   xElement.style.display, takze je dobre tam pridat jedno ifko na detekci existence elementu



Nahlásit jako SPAM
IP: 2001:718:2601:26c:69f7:c1...–
Zjistit počet nových příspěvků

Přidej příspěvek

×Vložení zdrojáku

×Vložení obrázku

Vložit URL obrázku Vybrat obrázek na disku
Vlož URL adresu obrázku:
Klikni a vyber obrázek z počítače:

×Vložení videa

Aktuálně jsou podporována videa ze serverů YouTube, Vimeo a Dailymotion.
×
 
Podporujeme Gravatara.
Zadej URL adresu Avatara (40 x 40 px) nebo emailovou adresu pro použití Gravatara.
Email nikam neukládáme, po získání Gravatara je zahozen.
-
Pravidla pro psaní příspěvků, používej diakritiku. ENTER pro nový odstavec, SHIFT + ENTER pro nový řádek.
Sledovat nové příspěvky (pouze pro přihlášené)
Sleduj vlákno a v případě přidání nového příspěvku o tom budeš vědět mezi prvními.
Reaguješ na příspěvek:

Uživatelé prohlížející si toto vlákno

Uživatelé on-line: 0 registrovaných, 13 hostů

 

Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032016 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý