點擊打開一些色彩鮮豔的瓷磚打開一個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

回答

相關問題