Pouze tento týden sleva až 80 % na e-learning týkající se Pythonu. Zároveň využij akce až 80 % zdarma při nákupu kreditů. Více informací:
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.
Avatar
pokusnicek
Člen
Avatar
pokusnicek:6.5.2017 12:54

Ahoj,

jsem začátečník v JQ a chci se zeptat, jak změnit obsah, po stisknutí na tlačítko? Mám tři boxy, když kliknu vždy na nový, tak se mi obsah změní. Ale jakmile se vrátím na stisklé tlačítko,tak se mi již box nezobrazí.

<!DOCTYPE html>
<html>
<head>
        <title>Pozicování</title>
    <meta charset="utf-8">
        <script src="https://code.jquery.com/jquery-3.2.1.min.js" type="text/javascript"></script>
    <style type="text/css">
         .obal{
                width:400px;
                height:450px;
                border:1px solid black;
         }
         .red{
                background:#bf4040;
                width:400px;
                height:450px;
                position:absolute;top:8%;
         }
         .orange{
                background:orange;
                width:400px;
                height:450px;
                position:absolute;top:8%;
         }
         .purple{
                background:purple;
                width:400px;
                height:450px;
                position:absolute;top:8%;
         }
    </style>
    <script type="text/javascript">
        $(document).ready(function(){
            $('.orange').hide();
         $('.purple').hide();
           $('.ukazred').click(function(){
                 $('.red').show();


           });
           $('.ukazorange').click(function(){
                 $('.orange').show();
                 $('.red').hide();


                 $('.ukazpurple').click(function(){
                 $('.purple').show();
                 $('.orange').hide();
                 $('.red').hide();



              });

           });

             });


    </script>
</head>
<body>
    <h1>Zkouška pozicování</h1>
     <section class="obal">
          <section class="red"></section>
          <section class="orange"></section>
          <section class="purple"></section>
     </section>

     <button class="ukazred">Ukaž červený box</button>
     <button class="ukazorange">Ukaž orange box</button>
         <button class="ukazpurple">Ukaž fialový box</button>

</body>
</html>
 
Odpovědět
6.5.2017 12:54
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na pokusnicek
Honza Bittner:6.5.2017 13:18

Jednoduché.

  1. máš kód jako prase a dokonce máš i vnořené click eventy, což nikdy nefunguje moc podle představ.
  2. ve tvých click eventech máš většinou jen show, tj. se dostaneš do stavu, kdy je jeden element nad ostatními a ty překrývá a je pak jedno na co klikáš, když ten úplně nahoře neskrýváš.

Lehce jsem upravil, inspiruj se:

https://jsfiddle.net/4by9590m/2/

Akceptované řešení
+5 Zkušeností
Řešení problému
Nahoru Odpovědět
6.5.2017 13:18
Absolvent FIT ČVUT :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
pokusnicek
Člen
Avatar
Odpovídá na Honza Bittner
pokusnicek:6.5.2017 13:20

Děkuju Honzo.

 
Nahoru Odpovědět
6.5.2017 13:20
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 3 zpráv z 3.