Question

我添加了三张照片。请看看他们。

创建这样的东西的最佳解决方案是什么？我会在每一行后创建一个大容器，这个容器会崩溃。点击3个上覆容器中的一个后，我将用文本填充容器并显示它。但是当显示器连续显示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。获取特定div的onclick事件并将display属性设置为block

＆＃13;

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

＆＃13;

.row
{
    width:100%;
}

.one-third
{  
  width:33.33333%;
  float:left;
  padding:30px 0;

}

.full-width
{
  display:none;
  width:100%;
  text-align:center;
}

＆＃13;

<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>

＆＃13;

单击另一个div时显示div

3 个答案: