1. 首頁
  2. 問答
  3. 如何使用下一個和上一個按鈕在表格之間切換？

如何使用下一個和上一個按鈕在表格之間切換？

2016-03-01 104 views
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恤設計表。有任何想法嗎？

來源

2016-03-01 Austin Jones

+3

「這是我的佈局，使之互動！」 - 不這樣工作。首先嚐試一下，然後再回答具體問題。作爲建議，請查看http://www.datatables.net。此外，您不能擁有兩個具有相同'id'的HTML元素。祝你好運。 –

+0

這是我的問題，我不知道該找什麼。感謝您以正確的方式指引我。 –

回答

0

您需要通過JavaScript控制display風格。更改爲空字符串當頁面應該顯示並更改爲none頁面應該隱藏時。

以下示例將頁面css類添加到每個tr以定義哪一行屬於哪個頁面。

var pages = ['page1', 'page2', 'page3']; 
 
var currPageIdx = 0; 
 

 

 
function updatePageInd() { 
 
    console.log("Update Page: " + (currPageIdx + 1)); 
 
    document.getElementById("pageInd").innerHTML = (currPageIdx + 1) + '/' + pages.length; 
 
} 
 

 
function setClassVisbility(className, visable) { 
 
    console.log("Set " + className + " Visability to " + visable); 
 
    var doms = []; 
 
    doms = document.getElementsByClassName(className); 
 
    console.log(doms); 
 
    if (!!doms && doms.length > 0) { 
 
    var display = !visable ? "none" : ""; 
 
    console.log(className + ": " + display); 
 
    for (var i = 0; i < doms.length; i++) { 
 
     var dom = doms[i]; 
 
     console.log(dom); 
 
     dom.style.display = display; 
 
    } 
 
    } 
 

 
} 
 

 
function nextPage() { 
 
    if (currPageIdx >= pages.length - 1) return; 
 
    setClassVisbility(pages[currPageIdx], false); 
 

 
    currPageIdx++; 
 

 
    setClassVisbility(pages[currPageIdx], true); 
 

 
    updatePageInd(); 
 
} 
 

 
function prevPage() { 
 
    if (currPageIdx <= 0) return; 
 
    setClassVisbility(pages[currPageIdx], false); 
 

 
    currPageIdx--; 
 

 
    setClassVisbility(pages[currPageIdx], true); 
 

 
    updatePageInd(); 
 
} 
 

 
function init() { 
 
    for (var i = 0; i < pages.length; i++) { 
 
    if (i != currPageIdx) { 
 
     setClassVisbility(pages[i], false); 
 
    } else { 
 
     setClassVisbility(pages[i], true); 
 
    } 
 

 
    } 
 

 
    updatePageInd(); 
 
} 
 

 
document.getElementById("prevBtn").addEventListener("click", prevPage); 
 
document.getElementById("nextBtn").addEventListener("click", nextPage); 
 
window.addEventListener('load', init, false)
#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; 
 
}
<button id="prevBtn">Previous</button> <span id="pageInd">1/1</span> 
 
<button id="nextBtn">Next</button> 
 

 
<table id="table1" ;="" cellspacing="25" ;="" text-align="center"> 
 

 
    <!--T-REX COFFEE--> 
 
    <tr class="page1"> 
 
    <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 class="page1"> 
 

 
    <!--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 class="page1"> 
 
    <!--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 class="page1"> 
 
    <!--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> 
 
    <tr class="page2"> 
 

 
    <td id="mainProduct"> 
 
     <a href=""> 
 
     <div class="card-container"> 
 
      <div class="card"> 
 
      <div class="side">This is Page 2 
 
      </div> 
 
      <div class="side back"> 
 
       <p id="description"></p> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </a> 
 
    </td> 
 

 
    </tr> 
 

 
    <tr class="page3"> 
 

 
    <td id="mainProduct"> 
 
     <a href=""> 
 
     <div class="card-container"> 
 
      <div class="card"> 
 
      <div class="side">This is Page 3 First Row 
 
      </div> 
 
      <div class="side back"> 
 
       <p id="description"></p> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </a> 
 
    </td> 
 

 
    </tr> 
 

 
    <tr class="page3"> 
 

 
    <td id="mainProduct"> 
 
     <a href=""> 
 
     <div class="card-container"> 
 
      <div class="card"> 
 
      <div class="side">This is Page 3 Second Row 
 
      </div> 
 
      <div class="side back"> 
 
       <p id="description"></p> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </a> 
 
    </td> 
 

 
    </tr> 
 

 

 

 
</table>

來源

2016-03-01 05:32:43

相關問題

 相關問題