0
我的T恤設計這個表:如何使用下一個和上一個按鈕在表格之間切換?
#mainProduct {
background-color: #E8E8E8;
}
.container {
max-width: 100%;
background-color: black;
margin-left: 15px;
text-align: center;
position: relative;
}
.container div {
background-color: white;
width: 100%;
display: inline-block;
display: none;
}
.container img {
width: 100%;
height: auto;
}
.card-container {
height: 200px;
perspective: 600;
position: relative;
width: 200px;
}
.card {
height: 100%;
position: absolute;
transform-style: preserve-3d;
transition: all 1s ease-in-out;
width: 100%;
}
.card:hover {
transform: rotateY(180deg);
}
.card .side {
backface-visibility: hidden;
height: 100%;
position: absolute;
width: 100%;
}
.card .back {
transform: rotateY(180deg);
}
#table1 {margin-left: 15px;}
#description {text-align:center; margin-top: 25%; font-size: 12px;}
<table id="table1" ;="" cellspacing="25" ;="" text-align="center">
<!--T-REX COFFEE-->
<tr>
<td id="mainProduct"><a href="http://www.cafepress.com/mizoo/13366446">
<div class="card-container">
<div class="card">
<div class="side"><img src="http://t12.deviantart.net/BrcRPOF9yezzdQA7qI0GGt9CQpA=/300x200/filters:fixed_height(100,100):origin()/pre02/0cc5/th/pre/i/2016/059/a/a/1_t_rex_coffee_by_mizoodesigns-d9tfftx.png">
</div>
<div class="side back">
<p id="description">What better way to show you love coffee than with a prehistoric predator!</p>
</div>
</div>
</div>
</a>
</td>
<!--TAFFY CAT BATUSI-->
<td id="mainProduct"><a href="http://www.cafepress.com/mizoo/13366550">
<div class="card-container">
<div class="card">
<div class="side"><img src="http://t02.deviantart.net/_WQLrq--RN0K8ixtplOOzyahVko=/300x200/filters:fixed_height(100,100):origin()/pre14/aefe/th/pre/i/2016/059/b/7/14_taffycat_batusi_by_mizoodesigns-d9tfg15.png">
</div>
<div class="side back"><p id="description">What's better than Taffy Cat doing the Batusi? Taffy cat doing the Batusi on a t-shirt!</p>
</div>
</div>
</div>
</a>
</td>
<!--SMILEY CONVERSE-->
<td id="mainProduct"><a href="">
<div class="card-container">
<div class="card">
<div class="side"><img src="http://t12.deviantart.net/kxTUWMz6TsfYVFSd_YSycsGW70I=/300x200/filters:fixed_height(100,100):origin()/pre09/bbd1/th/pre/i/2016/059/8/f/36_smiley_red_shoe_by_mizoodesigns-d9tfg7p.png">
</div>
<div class="side back"><p id="description">Smiley red shoe. Because ... shoe!</p>
</div>
</div>
</div>
</a>
</td>
</tr>
<tr>
<!--I'M BUFF-->
<td id="mainProduct"><a href="">
<div class="card-container">
<div class="card">
<div class="side"><img src="http://t07.deviantart.net/UCKBK6KyJzceGbuB8szw-ucEZ2Y=/300x200/filters:fixed_height(100,100):origin()/pre09/a544/th/pre/i/2016/059/e/9/18_buff_by_mizoodesigns-d9tfq5g.png">
</div>
<div class="side back"><p id="description">Because thinking you are something is half the journey of being something ...</p>
</div>
</div>
</div>
</a>
</td>
<!--Curvy-->
<td id="mainProduct"><a href="">
<div class="card-container">
<div class="card">
<div class="side"><img src="http://t08.deviantart.net/Lljv-RDFIKZCRuTf-GAxc0_BI0o=/300x200/filters:fixed_height(100,100):origin()/pre06/da78/th/pre/i/2016/059/7/c/19_curvy_by_mizoodesigns-d9tfqau.png">
</div>
<div class="side back"><p id="description">Because thinking you are something is half the journey of being something ...</p>
</div>
</div>
</div>
</a>
</td>
<!--Love female&female-->
<td id="mainProduct"><a href="">
<div class="card-container">
<div class="card">
<div class="side"><img src="http://t01.deviantart.net/hGoyHjNSwG-HMyz4tBPYyWBJnD8=/300x200/filters:fixed_height(100,100):origin()/pre01/bc6e/th/pre/i/2016/059/c/8/42_love3_by_mizoodesigns-d9tfo91.png">
</div>
<div class="side back"><p id="description">Celebrate love and diversity!</p>
</div>
</div>
</div>
</a>
</td>
</tr>
<tr>
<!--love male&male-->
<td id="mainProduct"><a href="">
<div class="card-container">
<div class="card">
<div class="side"><img src="http://t04.deviantart.net/cgbfKcYI8e56QSdswTVHPMG8LOI=/300x200/filters:fixed_height(100,100):origin()/pre12/3e14/th/pre/i/2016/059/2/b/41_love2_by_mizoodesigns-d9tfo4w.png">
</div>
<div class="side back"><p id="description">Celebrate love and diversity!</p>
</div>
</div>
</div>
</a>
</td>
<!--420 Deadpool-->
<td id="mainProduct"><a href="">
<div class="card-container">
<div class="card">
<div class="side"><img src="http://t08.deviantart.net/yUSAlWXmNVP8S_eBilkJrQVe3h0=/300x200/filters:fixed_height(100,100):origin()/pre01/9557/th/pre/i/2016/059/2/d/26_420pool_by_mizoodesigns-d9tfltp.png">
</div>
<div class="side back"><p id="description"></p>
</div>
</div>
</div>
</a>
</td>
<!--Super Taffy Cat-->
<td id="mainProduct"><a href="">
<div class="card-container">
<div class="card">
<div class="side"><img src="http://t07.deviantart.net/_ynkAcDVU3UrjIgmeUhz49Itxzs=/300x200/filters:fixed_height(100,100):origin()/pre10/c388/th/pre/i/2016/059/5/c/15_taffycat14_by_mizoodesigns-d9tfmhe.png">
</div>
<div class="side back"><p id="description"></p>
</div>
</div>
</div>
</a>
</td>
</tr>
<tr>
<!--Taffy Cat book-->
<td id="mainProduct"><a href="">
<div class="card-container">
<div class="card">
<div class="side"><img src="http://t02.deviantart.net/D6FyR9Ku_FWdtRRSJQSH90Fy9z4=/300x200/filters:fixed_height(100,100):origin()/pre11/5f3a/th/pre/i/2016/059/6/4/13_taffycat12_by_mizoodesigns-d9tfng8.png">
</div>
<div class="side back"><p id="description"></p>
</div>
</div>
</div>
</a>
</td>
<!--Prop of 420-->
<td id="mainProduct"><a href="">
<div class="card-container">
<div class="card">
<div class="side"><img src="http://t15.deviantart.net/Br5zZ0fwMNx3Tyebl0HT7TjB9GI=/300x200/filters:fixed_height(100,100):origin()/pre06/32ac/th/pre/i/2016/059/9/4/24_propertyof420_by_mizoodesigns-d9tfope.png">
</div>
<div class="side back"><p id="description"></p>
</div>
</div>
</div>
</a>
</td>
<!--All that list-->
<td id="mainProduct"><a href="">
<div class="card-container">
<div class="card">
<div class="side"><img src="http://t09.deviantart.net/ugkgkxMIkDWBjB-SEKEJDpHE4Zs=/300x200/filters:fixed_height(100,100):origin()/pre02/00e6/th/pre/i/2016/059/b/c/43__checklist_by_mizoodesigns-d9tfkdq.png">
</div>
<div class="side back"><p id="description"></p>
</div>
</div>
</div>
</a>
</td>
</tr>
</table>
現在我想有在同一準確的位置按下開關時,另一臺這樣下一個和上一個按鈕。例如,有人會看到這張表,然後他們點擊下一個按鈕,並顯示一個新的T恤設計表。有任何想法嗎?
「這是我的佈局,使之互動!」 - 不這樣工作。首先嚐試一下,然後再回答具體問題。作爲建議,請查看http://www.datatables.net。此外,您不能擁有兩個具有相同'id'的HTML元素。祝你好運。 –
這是我的問題,我不知道該找什麼。感謝您以正確的方式指引我。 –