所以我一直在研究這幾天,當我認爲它完美時,我不得不重構整個頁面,現在我卡住了。我有三個圖像,每個下面都有按鈕。任何時候單擊一個按鈕我都需要它在頁面底部顯示隱藏的內容並隱藏任何可見的內容。我還需要頁面跳轉,以使div的頂部位於窗口的頂部。以下是我有:點擊按鈕時隱藏/顯示隱藏的div div
$("#Template1").click(function() {
var div = document.getElementById('#content1');
if (div.style.display !== 'none') {
div.style.display = 'none';
}
else {
div.style.display = 'block';
}
});
.cell1 {
display: table;
text-align: center;
table-layout: fixed;
border-spacing: 10px;
width: 100%;
}
.cell2 {
display: table;
text-align: center;
table-layout: fixed;
border-spacing: 10px;
width: 100%;
}
.Column {
vertical-align: top;
width: 500px;
display: table-cell;
}
#img1,
#img2,
#img3 {
display: inline-block;
align: center;
padding: 10px 20px 10px 20px;
vertical-align: top
}
#Template1,
#Template2,
#Template3 {
margin-top: 14px;
background-color: #cb3778;
font-family: Arial;
font-size: 20px;
width: 260px;
float: center;
color: #FFF;
cursor: pointer;
}
.Template0 {
display: block;
clear: both;
width: 100%;
}
#content1,
#content2,
#content3 {
display: none;
clear: both;
width: 100%;
}
@media only screen and (max-width: 600px) {
*[class*="mobile-only"] {
display: block !important;
max-height: none !important;
}
.mobile {
display: block !important;
margin-top: 14px !important;
margin-bottom: 14px !important;
margin-left: 0px !important;
padding: 10px 0 10px 0 !important;
}
.mobile-img {
display: block !important;
Width: 100% !important;
align: center !important;
}
.mobile-column {
display: block !important;
Width: 100% !important;
align: center !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div align="center">
<div class="Column mobile-column">
<div class="cell1">
<img width="400" height="355" border="0" src="col1-2.jpg" class="mobile-img" alt="Template 1" />
</div>
<div class="cell2 mobile" id="Template1">Template1</div>
</div>
<div class="Column mobile-column">
<div class="cell1">
<img width="400" height="355" border="0" src="6pack-1.jpg" class="mobile-img" alt="Template 2" />
</div>
<div class="cell2 mobile" id="Template2">Template2</div>
</div>
<div class="Column mobile-column">
<div class="cell1">
<img width="400" height="355" border="0" src="hero-1col.jpg" class="mobile-img" alt="Template 3" />
</div>
<div class="cell2 mobile" id="Template3">Template3</div>
</div>
</div>
<div align="center">
<div align="center" style="padding-top:150px;" id="content1">sample demo txt two 2</div>
<div align="center" style="padding-top:150px;" id="content2">sample demo txt two 3</div>
<div align="center" style="padding-top:150px;" id="content3">sample demo txt two 4</div>
</div>
請包括您的JavaScript代碼。 – Kryten
我剛剛在問題中加入了javascript – cgrouge
@cgrouge你的演示程序似乎缺少div##content1' – BurningLights