私は3枚の写真を追加しました。彼らを見てください。 divを別のdivをクリックして表示する
これを作成する最適なソリューションは何ですか?私は各列の後に大きなコンテナを作成し、このコンテナは折りたたまれます。上に重なる3つのコンテナの1つをクリックした後、コンテナにテキストを入力して表示します。フレックスボックスを使用するため、3つのdivを連続して表示できない場合はどうなりますか?はるかに少ないjqueryとより良いソリューションはありますか?
私は3枚の写真を追加しました。彼らを見てください。 divを別のdivをクリックして表示する
これを作成する最適なソリューションは何ですか?私は各列の後に大きなコンテナを作成し、このコンテナは折りたたまれます。上に重なる3つのコンテナの1つをクリックした後、コンテナにテキストを入力して表示します。フレックスボックスを使用するため、3つのdivを連続して表示できない場合はどうなりますか?はるかに少ないjqueryとより良いソリューションはありますか?
たぶん、このような何かを開始するには良い場所です: 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;
}
あなたは....このように、この問題を解決するために htmlコードはJavaScriptを使用することができます:外部ファイルにJavaScriptコード
<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>
を
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";
}
div要素を追加し、隠しにその表示を設定します。 特定のdivのためのonclickイベントを取得し、
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>
ベストソリューションブロックするための表示プロパティを設定: 'CSS'または多分いくつかの研究をやって試して時間を過ごすの。 – NewToJS