点击打开一些色彩鲜艳的瓷砖打开一个div

我想制作一些彩色的瓷砖，点击打开一个模式，再添加一些瓷砖。这些瓷砖应刷新模式并显示另一个瓷砖。点击打开一些色彩鲜艳的瓷砖打开一个div

我想制作一个文件夹，其中有更多的文件夹和一些更多的文件夹。

只要告诉我如何做到一级深度，我会休息。

现在所有我做的是：

html, body, .container 
 
{ 
 
height: 100%; 
 
min-height: 100%; 
 
} 
 

 
.first { 
 
float: left; 
 
width: 20%; 
 
height: 30%; 
 
background-color: red; 
 
} 
 

 
.second{ 
 
float: left; 
 
width: 20%; 
 
height: 70%; 
 
background-color: green; 
 
} 
 

 

 
.third{ 
 
float: right; 
 
width: 80%; 
 
height: 80%; 
 
background-color: blue; 
 
} 
 

 
.fourth { 
 
float: right; 
 
width: 40%; 
 
height: 20%; 
 
background-color: #DDDDDD; 
 
} 
 

 
.last{ 
 
float: right; 
 
width: 40%; 
 
height: 20%; 
 
background-color: yellow; 
 
}

<div class="container"> 
 
<div class="first">first</div><div class="third">third</div> 
 
<div class="second">second</div><div class="fourth">fourth</div> 
 
<div class="last">last</div> 
 
</div>

来源

2017-05-25 Sidhant Sood

你写过这方面的任何JavaScript的？ – sorayadragon

naah！我没有，但plz帮助我...我有一个死亡线 –

请阅读[在什么情况下，我可以添加“紧急”或其他类似的短语我的问题，以获得更快的答案？]（https：// meta.stackoverflow.com/q/326569） - 总结是，这不是解决志愿者问题的理想方式，而且可能会对获得答案产生反作用。请不要将这添加到您的问题。 – halfer

可能最好使用像引导（这也将需要的jQuery）：

https://jsfiddle.net/ryanpcmcquen/jpe70pLy/

html, 
 
body, 
 
.container { 
 
    height: 100%; 
 
    min-height: 100%; 
 
} 
 

 
.first { 
 
    float: left; 
 
    width: 20%; 
 
    height: 30%; 
 
    background-color: red; 
 
} 
 

 
.second { 
 
    float: left; 
 
    width: 20%; 
 
    height: 70%; 
 
    background-color: green; 
 
} 
 

 
.third { 
 
    float: right; 
 
    width: 80%; 
 
    height: 80%; 
 
    background-color: blue; 
 
} 
 

 
.fourth { 
 
    float: right; 
 
    width: 40%; 
 
    height: 20%; 
 
    background-color: #DDDDDD; 
 
} 
 

 
.last { 
 
    float: right; 
 
    width: 40%; 
 
    height: 20%; 
 
    background-color: yellow; 
 
}

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<div class="container"> 
 
    <div class="first" data-toggle="modal" data-target="#myModal"> 
 
    first 
 
    </div> 
 
    <div class="third">third</div> 
 
    <div class="second">second</div> 
 
    <div class="fourth">fourth</div> 
 
    <div class="last">last</div> 
 
</div> 
 
<!-- Modal --> 
 
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
 
    <div class="modal-dialog" role="document"> 
 
    <div class="modal-content"> 
 
     Put a bunch of tiles here. 
 
    </div> 
 
    </div> 
 
</div>

这将为您处理JavaScript，然后您可以只写一些干净的模式标记。更多细节在这里如何使用引导情态动词：

https://getbootstrap.com/javascript/#live-demo

来源

2017-05-25 17:00:47 ryanpcmcquen

谢谢，它的工作和PLZ你可以upvote这个问题，它已经在我的声誉，我的名声。谢谢你的帮助 –

点击打开一些色彩鲜艳的瓷砖打开一个div

回答

相关问题