Javascript 将div内容替换为css3 onclick
我刚刚制作了一个有120行的表格，我将把页码放在底部，让用户选择，我想在一页中显示15行，当用户单击第二页时，这些行应该被替换为新的15行Javascript 将div内容替换为css3 onclick,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我刚刚制作了一个有120行的表格，我将把页码放在底部，让用户选择，我想在一页中显示15行，当用户单击第二页时，这些行应该被替换为新的15行 <div class="full" > <table class="flat-table flat-table-2" width="70%" style="margin:auto;"> <tr><th>numbers</th><th>
<div class="full" >
<table class="flat-table flat-table-2" width="70%" style="margin:auto;">
<tr><th>numbers</th><th>address</th></tr>
<div id="page1">
<tr><td>3</td><td><a href="#">test</a></td></tr>
<tr><td>5</td><td><a href="#">test</a></td></tr>
<tr><td>1</td><td><a href="#">test</a></td></tr>
<tr><td>1</td><td><a href="#">test</a></td></tr>
<tr><td>1</td><td><a href="#">test</a></td></tr>
<tr><td>1</td><td><a href="#">test</a></td></tr>
<tr><td>1</td><td><a href="#">test</a></td></tr>
<tr><td>1</td><td><a href="#">test</a></td></tr>
<tr><td>1</td><td><a href="#">test</a></td></tr>
<tr><td>1</td><td><a href="#">test</a></td></tr>
<tr><td>1</td><td><a href="#">test</a></td></tr>
<tr><td>1</td><td><a href="#">test</a></td></tr>
<tr><td>1</td><td><a href="#">test</a></td></tr>
</div>
<div id="page2">
<tr><td>3</td><td><a href="#">test</a></td></tr>
<tr><td>5</td><td><a href="#">test</a></td></tr>
<tr><td>1</td><td><a href="#">test</a></td></tr>
<tr><td>1</td><td><a href="#">test</a></td></tr>
<tr><td>1</td><td><a href="#">test</a></td></tr>
<tr><td>1</td><td><a href="#">test</a></td></tr>
<tr><td>1</td><td><a href="#">test</a></td></tr>
<tr><td>1</td><td><a href="#">test</a></td></tr>
<tr><td>1</td><td><a href="#">test</a></td></tr>
<tr><td>1</td><td><a href="#">test</a></td></tr>
<tr><td>1</td><td><a href="#">test</a></td></tr>
<tr><td>1</td><td><a href="#">test</a></td></tr>
<tr><td>1</td><td><a href="#">test</a></td></tr>
</div>
<div id="page3">
<tr><td>3</td><td><a href="#">test</a></td></tr>
<tr><td>5</td><td><a href="#">test</a></td></tr>
<tr><td>1</td><td><a href="#">test</a></td></tr>
<tr><td>1</td><td><a href="#">test</a></td></tr>
<tr><td>1</td><td><a href="#">test</a></td></tr>
<tr><td>1</td><td><a href="#">test</a></td></tr>
<tr><td>1</td><td><a href="#">test</a></td></tr>
<tr><td>1</td><td><a href="#">test</a></td></tr>
<tr><td>1</td><td><a href="#">test</a></td></tr>
<tr><td>1</td><td><a href="#">test</a></td></tr>
<tr><td>1</td><td><a href="#">test</a></td></tr>
<tr><td>1</td><td><a href="#">test</a></td></tr>
<tr><td>1</td><td><a href="#">test</a></td></tr>
</div>
</table>
<div class="footer-pop">
<a href= "3" id="page3"class="pages">3</a>
<a href= "2" id="page2"class="pages">2</a>
<a href="1" id="page1"class="pages">1</a>
</div>
</div>
号码地址
3.
5.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
3.
5.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
3.
5.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
感谢高级当您为所有divs类提供“页面”时，下面的代码应该有效，并且每个按钮应该有一个页面 并给予
$('.footer-pop a').click( function(){
var self = $(this);
$('div.pages').hide();
$('div.pages').eq(self.index() +1 ).show()
});
不管怎样，我没有试过。。请检查此这里是我使用jQuery，并编辑一些您的HTML HTML
<div class="full" >
<table class="flat-table flat-table-2" width="70%" style="margin:auto;">
<tr><th>numbers</th><th>address</th></tr>
<tr class="page1"><td>3</td><td><a href="#">test</a></td></tr>
<tr class="page1"><td>5</td><td><a href="#">test</a></td></tr>
<tr class="page1"><td>1</td><td><a href="#">test</a></td></tr>
.......
<div class="full">
<table class="flat-table flat-table-2" width="70%" style="margin:auto;">
<thead>
<tr>
<th>numbers</th>
<th>address</th>
</tr>
</thead>
<tbody id="page1">
<tr>
<td>1-3</td>
<td><a href="#">test</a>
</td>
</tr>
<tr>
<td>5</td>
<td><a href="#">test</a>
</td>
</tr>
<tr>
<td>1</td>
<td><a href="#">test</a>
</td>
</tr>
<tr>
<td>1</td>
<td><a href="#">test</a>
</td>
</tr>
<tr>
<td>1</td>
<td><a href="#">test</a>
</td>
</tr>
<tr>
<td>1</td>
<td><a href="#">test</a>
</td>
</tr>
<tr>
<td>1</td>
<td><a href="#">test</a>
</td>
</tr>
<tr>
<td>1</td>
<td><a href="#">test</a>
</td>
</tr>
<tr>
<td>1</td>
<td><a href="#">test</a>
</td>
</tr>
<tr>
<td>1</td>
<td><a href="#">test</a>
</td>
</tr>
<tr>
<td>1</td>
<td><a href="#">test</a>
</td>
</tr>
<tr>
<td>1</td>
<td><a href="#">test</a>
</td>
</tr>
<tr>
<td>1</td>
<td><a href="#">test</a>
</td>
</tr>
</tbody>
<tbody id="page2" class="hidden">
<tr>
<td>2-3</td>
<td><a href="#">test</a>
</td>
</tr>
<tr>
<td>5</td>
<td><a href="#">test</a>
</td>
</tr>
<tr>
<td>1</td>
<td><a href="#">test</a>
</td>
</tr>
<tr>
<td>1</td>
<td><a href="#">test</a>
</td>
</tr>
<tr>
<td>1</td>
<td><a href="#">test</a>
</td>
</tr>
<tr>
<td>1</td>
<td><a href="#">test</a>
</td>
</tr>
<tr>
<td>1</td>
<td><a href="#">test</a>
</td>
</tr>
<tr>
<td>1</td>
<td><a href="#">test</a>
</td>
</tr>
<tr>
<td>1</td>
<td><a href="#">test</a>
</td>
</tr>
<tr>
<td>1</td>
<td><a href="#">test</a>
</td>
</tr>
<tr>
<td>1</td>
<td><a href="#">test</a>
</td>
</tr>
<tr>
<td>1</td>
<td><a href="#">test</a>
</td>
</tr>
<tr>
<td>1</td>
<td><a href="#">test</a>
</td>
</tr>
</tbody>
<tbody id="page3" class="hidden">
<tr>
<td>3-3</td>
<td><a href="#">test</a>
</td>
</tr>
<tr>
<td>5</td>
<td><a href="#">test</a>
</td>
</tr>
<tr>
<td>1</td>
<td><a href="#">test</a>
</td>
</tr>
<tr>
<td>1</td>
<td><a href="#">test</a>
</td>
</tr>
<tr>
<td>1</td>
<td><a href="#">test</a>
</td>
</tr>
<tr>
<td>1</td>
<td><a href="#">test</a>
</td>
</tr>
<tr>
<td>1</td>
<td><a href="#">test</a>
</td>
</tr>
<tr>
<td>1</td>
<td><a href="#">test</a>
</td>
</tr>
<tr>
<td>1</td>
<td><a href="#">test</a>
</td>
</tr>
<tr>
<td>1</td>
<td><a href="#">test</a>
</td>
</tr>
<tr>
<td>1</td>
<td><a href="#">test</a>
</td>
</tr>
<tr>
<td>1</td>
<td><a href="#">test</a>
</td>
</tr>
<tr>
<td>1</td>
<td><a href="#">test</a>
</td>
</tr>
</tbody>
</table>
<div class="footer-pop">
<a href= "#" data-id="page3"class="pages">3</a>
<a href= "#" data-id="page2"class="pages">2</a>
<a href="#" data-id="page1"class="pages">1</a>
</div>
</div>
您有两个问题。表中带有div的html无效，并且您有多个id相同的元素。只需将多个tbody元素与thead一起使用即可 HTML
<div class="full" >
<table class="flat-table flat-table-2" width="70%" style="margin:auto;">
<tr><th>numbers</th><th>address</th></tr>
<tr class="page1"><td>3</td><td><a href="#">test</a></td></tr>
<tr class="page1"><td>5</td><td><a href="#">test</a></td></tr>
<tr class="page1"><td>1</td><td><a href="#">test</a></td></tr>
.......
<div class="full">
<table class="flat-table flat-table-2" width="70%" style="margin:auto;">
<thead>
<tr>
<th>numbers</th>
<th>address</th>
</tr>
</thead>
<tbody id="page1">
<tr>
<td>1-3</td>
<td><a href="#">test</a>
</td>
</tr>
<tr>
<td>5</td>
<td><a href="#">test</a>
</td>
</tr>
<tr>
<td>1</td>
<td><a href="#">test</a>
</td>
</tr>
<tr>
<td>1</td>
<td><a href="#">test</a>
</td>
</tr>
<tr>
<td>1</td>
<td><a href="#">test</a>
</td>
</tr>
<tr>
<td>1</td>
<td><a href="#">test</a>
</td>
</tr>
<tr>
<td>1</td>
<td><a href="#">test</a>
</td>
</tr>
<tr>
<td>1</td>
<td><a href="#">test</a>
</td>
</tr>
<tr>
<td>1</td>
<td><a href="#">test</a>
</td>
</tr>
<tr>
<td>1</td>
<td><a href="#">test</a>
</td>
</tr>
<tr>
<td>1</td>
<td><a href="#">test</a>
</td>
</tr>
<tr>
<td>1</td>
<td><a href="#">test</a>
</td>
</tr>
<tr>
<td>1</td>
<td><a href="#">test</a>
</td>
</tr>
</tbody>
<tbody id="page2" class="hidden">
<tr>
<td>2-3</td>
<td><a href="#">test</a>
</td>
</tr>
<tr>
<td>5</td>
<td><a href="#">test</a>
</td>
</tr>
<tr>
<td>1</td>
<td><a href="#">test</a>
</td>
</tr>
<tr>
<td>1</td>
<td><a href="#">test</a>
</td>
</tr>
<tr>
<td>1</td>
<td><a href="#">test</a>
</td>
</tr>
<tr>
<td>1</td>
<td><a href="#">test</a>
</td>
</tr>
<tr>
<td>1</td>
<td><a href="#">test</a>
</td>
</tr>
<tr>
<td>1</td>
<td><a href="#">test</a>
</td>
</tr>
<tr>
<td>1</td>
<td><a href="#">test</a>
</td>
</tr>
<tr>
<td>1</td>
<td><a href="#">test</a>
</td>
</tr>
<tr>
<td>1</td>
<td><a href="#">test</a>
</td>
</tr>
<tr>
<td>1</td>
<td><a href="#">test</a>
</td>
</tr>
<tr>
<td>1</td>
<td><a href="#">test</a>
</td>
</tr>
</tbody>
<tbody id="page3" class="hidden">
<tr>
<td>3-3</td>
<td><a href="#">test</a>
</td>
</tr>
<tr>
<td>5</td>
<td><a href="#">test</a>
</td>
</tr>
<tr>
<td>1</td>
<td><a href="#">test</a>
</td>
</tr>
<tr>
<td>1</td>
<td><a href="#">test</a>
</td>
</tr>
<tr>
<td>1</td>
<td><a href="#">test</a>
</td>
</tr>
<tr>
<td>1</td>
<td><a href="#">test</a>
</td>
</tr>
<tr>
<td>1</td>
<td><a href="#">test</a>
</td>
</tr>
<tr>
<td>1</td>
<td><a href="#">test</a>
</td>
</tr>
<tr>
<td>1</td>
<td><a href="#">test</a>
</td>
</tr>
<tr>
<td>1</td>
<td><a href="#">test</a>
</td>
</tr>
<tr>
<td>1</td>
<td><a href="#">test</a>
</td>
</tr>
<tr>
<td>1</td>
<td><a href="#">test</a>
</td>
</tr>
<tr>
<td>1</td>
<td><a href="#">test</a>
</td>
</tr>
</tbody>
</table>
<div class="footer-pop">
<a href= "#" data-id="page3"class="pages">3</a>
<a href= "#" data-id="page2"class="pages">2</a>
<a href="#" data-id="page1"class="pages">1</a>
</div>
</div>
.hidden { display:none; }
我无法替换页面内容这是静态的还是动态的？没有css3，只要单击您需要使用javascript来完成相同的任务。只是一个建议，您不能将