Proszę o przykład, gdzie kliknięty div ładuje nowego diva na tę samą stronę

pytanie zadane 15 kwietnia 2018 w JavaScript przez DariuszH Gaduła (3,100 p.)

Proszę o przykład gdzie div otwiera kolejnego diva na tej samej stronie :)

2 odpowiedzi

odpowiedź 15 kwietnia 2018 przez Alan1221 Użytkownik (950 p.)

Odsyłam do innej strony: https://stackoverflow.com/questions/6678044/how-to-add-a-div-when-clicking-a-button-in-jquery

komentarz 15 kwietnia 2018 przez DariuszH Gaduła (3,100 p.)

nie działa nic

komentarz 15 kwietnia 2018 przez Alan1221 Użytkownik (950 p.)

konkretnie? / błąd

komentarz 15 kwietnia 2018 przez DariuszH Gaduła (3,100 p.)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js" ></script> 
<script src="scripts.js"></script>
<link rel="stylesheet" href="index.css" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Mukta+Mahee" rel="stylesheet">
</head>

<body >
    
<div class="main" onclick="changecolor()">

 <div id="foto" onclick="myFunction()">      
     <div id="curry" ><img src="curry.jpg" style="width:  auto; height: 80vh;"></div> 
     <div id="westbrook"><img src="westbrook.jpg" style="width:  auto; height: 80vh;"></div>
     <div id="lebron"><img src="lebron.jpg" style="width:  auto; height: 80vh;"></div> 
     <div id="harden"><img src="harden.jpg" style="width:  auto; height: 80vh;"></div>
     <div id="kobe"><img src="kobe.jpg" style="width:  auto; height: 80vh;"></div> 
     <div id="wade"><img src="wade.jpg" style="width:  auto; height: 80vh;"></div>

</div>

<div id="quadrat0"></div>
<div id="quadrat1">beeeeeee</div>
<div id="quadrat2"></div>
<div id="quadrat3"></div>
<div id="quadrat4"></div>
<div id="quadrat5"></div>
<div id="quadrat6"></div>
<div id="quadrat7"></div>
<div id="quadrat8"></div>
<div id="quadrat9"></div>
<div id="quadrat10"></div>
<div id="quadrat11"></div>



        <div id="stars" >
          <div class="best0" >  Michael jordan</div>
          <div class="best1">  Kobe Bryant</div>
          <div class="best2">   Lebron James</div>
          <div class="best3">   Stephen Curry</div>
          <div class="best4">    Dwyane Wade</div>
          <div class="best5">   Kevin Durant</div>
          <div class="best6">    Shaquille O'Neal</div>
          <div class="best7">    Scottie Pippen</div>
          <div class="best8">   Shaquille O'Neal</div>
          <div class="best9">   Russell Westbrook</div>
          <div class="best10">   Allen Iverson</div>
          <div class="best11">   Vince Carter</div>
          <div class="best11">  Marcin Gortat </div>  
        </div>












       
    
    

  
   
    
    
</body>

</html>

function myFunction(){


    var x = document.getElementById("foto" );
    var y= document.getElementById("quadrat0");
    var z=document.getElementById("stars");
   
    
    if (x.style.display === "block") {
            x.style.display = "block";
        } else {
            x.style.display = "block";
        }

    
    if (y.style.display === "block") {
        y.style.display = "block";
       
    } else {
        y.style.display = "block";
    }

x.style.zIndex ="-1" ;
z.style.zIndex="1";  
y.style.zIndex="1";

return;
};

body{
	width:100%;
	height:100vh;
    margin:0;
    padding: 0;
	
}



#foto{

position: absolute;
top:10vh;
left:29%;


}

#curry,#westbrook,#lebron,#harden,#kobe,#wade{

float: left;
margin: 0;
padding: 0;
background-size: 100% 100%;

}


#curry{

animation:curry_animation 1s;
opacity:1;
margin-top:0;
}

@keyframes curry_animation{

from{opacity: 0;margin-top:-140vh;}
to{opacity:1; margin-top:0;}

}

#westbrook{
    animation:westbrook_animation 1s;
    opacity:1;
    margin-top:0;

}

@keyframes westbrook_animation{

    from{opacity: 0;margin-top:200vh; opacity:0;}
    to{opacity:1; margin-top:0; opacity:1;}
    
    }

#lebron{

    animation:lebron_animation 1s;
    opacity:1;
    margin-top:0;


}
@keyframes lebron_animation{

    from{opacity: 0;margin-top:-180vh; opacity:0;}
    to{opacity:1; margin-top:0; opacity:1;}
    
    }


    #harden{

        animation:harden_animation 1s;
        opacity:1;
        margin-top:0;
    
    
    }

    @keyframes harden_animation{

        from{opacity: 0;margin-top:200vh; }
        to{opacity:1; margin-top:0; }
        
        }


        #kobe { 

            animation:kobe_animation 1s;
            opacity:1;
            margin-top:0vh;
        
        
        }
    
        @keyframes kobe_animation{
    
            from{opacity:0;margin-top:-200vh; }
            to{opacity:1; margin-top:0; }
            
            }
    

            #wade { 

                animation:wade_animation 1s;
                opacity:1;
                margin-top:0vh;
            
            
            }
        
            @keyframes wade_animation{
        
                from{opacity:0;margin-top:600vh; }
                to{opacity:1; margin-top:0; }
                
                }


#foto{
width: 70%;
height: 100vh;
position: absolute;
background-color: rgb(255, 255, 255);
left: 14.6%;
top:8vh;
z-index: 0;
padding: 0;
margin: 0;

}

.main{
    width: 100%;
    height: 100vh;
    position: absolute;
    background-color: rgb(255, 255, 255);
    
    
    }



#quadrat0,#quadrat1,#quadrat2,#quadrat3,
#quadrat4,#quadrat5,
#quadrat6,#quadrat7,#quadrat8,#quadrat9,#quadrat10,#quadrat11{
position: absolute;
top:3.2vh;
left: 2.5vh;
width: 84.5%;
height: 91vh;
border: black 0.1vh solid;
border-radius:0.3%;
z-index: -1;

}

#stars{

width:12%;
height: auto;
z-index: -1;

text-align: center;
line-height:7vh;
position: absolute;
left:87%;
top:3vh;
}

.best0,.best1,.best2,.best3,.best4,.best5,.best6,
.best7,.best8,.best9,.best10,.best11 {
border:0.1vh solid black;
font-size:3vh;
height: 7vh;
border: solid 0.04vh rgb(255, 255, 255);
background-color: rgb(0, 0, 0);
color:white;
}
 

.best0:hover,.best1:hover,.best2:hover,.best3:hover,.best4:hover,.best5:hover,.best6:hover,
.best7:hover,.best8:hover,.best9:hover,.best10:hover,.best11:hover{

background-color: olivedrab;

Chodzi o to by div="best0" wczytywał diva na tej samej stronie div="quadrat2" np.....

1	komentarz 15 kwietnia 2018 przez Tomek Sochacki Ekspert (227,510 p.) if (x.style.display === "block") a ten sposób odczytasz tylko style przypisane inline, a nie te wygenerowane w css. Poczytaj np. o getComputedStyle.

odpowiedź 16 kwietnia 2018 przez dt98 Nowicjusz (140 p.)

Można też czystym JSem :) Najprostszy przykład:

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>przyklad</title>
</head>
<body>

    <input type="button" id="btn" value="Poka diva">

    <script>
    
    document.getElementById('btn').addEventListener('click', showDiv);

    function showDiv() {

        let div = document.createElement('div');
        div.innerHTML = `
        <div>
            <h2>Lorem, ipsum.</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellendus, reiciendis.</p>
            
        </div>
        `;

        document.body.appendChild(div);
    }
    
    </script>
    
</body>
</html>

Zachęcam do researchu i zabawy!