Показать div при нажатии на другой div

Question

Я добавил три фотографии. Посмотрите на них, пожалуйста.

Какое оптимальное решение для создания чего-то подобного? Я бы создал после каждой строки большой контейнер, и этот контейнер рухнул. После нажатия на один из трех вышележащих контейнеров я должен заполнить контейнер текстом и показать его. Но что происходит, когда дисплей не может отображать 3 div в строке, потому что я буду использовать гибкие окна? Есть ли лучшее решение с гораздо меньшим количеством jquery?

Answer 1

Может быть что-то, как это хорошее место, чтобы начать: https://jsfiddle.net/547ec3bx/

HTML

<div class="wrapper"> 
    <div class="row"> 
    <div class="element"> 
    </div> 
    <div class="element"> 
    </div> 
    <div class="element"> 
    </div> 
    </div> 
    <div class="row"> 
    <div class="element"> 
    </div> 
    <div class="element"> 
    </div> 
    <div class="element"> 
    </div> 
    </div> 
    <div class="row"> 
    <div class="element"> 
    </div> 
    <div class="element"> 
    </div> 
    <div class="element"> 
    </div> 
    </div> 
</div> 

Javascript

document.querySelectorAll('.row').forEach((element, index) => { 
    element.style.order = index * 2; 
}); 

document.querySelectorAll('.element').forEach(element => { 
    element.addEventListener('click', event => { 
    var newRow = document.createElement('div'); 
    newRow.classList.add('row'); 
    newRow.style.order = +event.currentTarget.parentNode.style.order + 1; 
    var newElement = document.createElement('div'); 
    newElement.classList.add('element'); 
    newRow.appendChild(newElement); 
    event.currentTarget.parentNode.parentNode.appendChild(newRow); 
    }); 
}); 

CSS

.element { 
    min-width: 100px; 
    height: 50px; 
    flex: 1; 
    border: 1px solid black; 
    flex-wrap: nowrap; 
} 

.row { 
    width: 350px; 
    display: flex; 
    flex-direction: row; 
} 

.wrapper { 
    display: flex; 
    flex-direction: column; 
} 

Answer 2

Вы можете использовать JavaScript, чтобы решить эту проблему, как это .... HTML код:

<div id="a"> 
    <a href="#e" onclick="goB()"><h3>wellcome</h3></a> 

</div> 
<div id="b"> 
    <a href = "#er" onclick="goA"> <h3>hello...</h3> </a> 
</div> 

Javascript код во внешнем файле

function goB() 
{ 
    document.getElementById("a").style.display="none"; 
    document.getElementById("b").style.display="block"; 
} 
function 
{ 
    document.getElementById("b").style.display="none"; 
    document.getElementById("a").style.display="block"; 
} 

Answer 3

Добавьте DIV и установите дисплей Hidden. Получить OnClick событие для конкретного DIV и установить свойство дисплея блокировать

window.addEventListener("load", function(){ 
 
    document.getElementById("click").onclick = function(){ 
 
     document.getElementById("div-1").style.display = "block"; 
 
    }; 
 
});

.row 
 
{ 
 
    width:100%; 
 
} 
 

 
.one-third 
 
{ 
 
    width:33.33333%; 
 
    float:left; 
 
    padding:30px 0; 
 

 
} 
 

 
.full-width 
 
{ 
 
    display:none; 
 
    width:100%; 
 
    text-align:center; 
 
}

<div class=wrap> 
 
    <div class="row"> 
 
    <div id="click" class="one-third"> 
 
     Column 1-Click Me 
 
     </div> 
 
    <div class="one-third"> 
 
     Column 2 
 
    </div> 
 
    <div class="one-third"> 
 
     Column 3 
 
     </div> 
 
    </div> 
 
<div class="full-width" id="div-1">Full width Div</div> 
 
    
 
    <div class="row"> 
 
    <div class="one-third"> 
 
     Column 1 
 
     </div> 
 
    <div class="one-third"> 
 
     Column 2 
 
     </div> 
 
    <div class="one-third"> 
 
     Column 3 
 
     </div> 
 
    </div>