W3.JS 介绍
HTML 幻灯片
实例
<img class="nature" src="img_snowtops.jpg">
<img class="nature" src="img_mountains.jpg">
<img class="nature" src="img_nature.jpg">
<script>
w3.slideshow(".nature");
</script>
<img class="nature" src="img_mountains.jpg">
<img class="nature" src="img_nature.jpg">
<script>
w3.slideshow(".nature");
</script>
尝试一下 »
在 HTML 中显示数据
HTML元素排列
Click on the table headers to sort the table accordingly:
实例
<table id="myTable">
<tr>
<th onclick="w3.sortHTML('#myTable','.item', 'td:nth-child(1)')">Name</th>
<th onclick="w3.sortHTML('#myTable','.item', 'td:nth-child(2)')">Country</th>
</tr>
</table>
<tr>
<th onclick="w3.sortHTML('#myTable','.item', 'td:nth-child(1)')">Name</th>
<th onclick="w3.sortHTML('#myTable','.item', 'td:nth-child(2)')">Country</th>
</tr>
</table>
尝试一下 »
筛选HTML元素
隐藏和显示 HTML 元素
实例
<p><button onclick="w3.hide('.city')">隐藏</button></p>
<p><button onclick="w3.show('.city')">显示</button></p>
<button onclick="w3.toggleShow('.city')">Toggle Hide/Show</button>尝试一下 »
添加HTML元素样式
切换HTML元素的类
实例
<button onclick="w3.addClass('#London','marked')">添加类</button>
<button onclick="w3.removeClass('#London','marked')">删除类</button>
<button onclick="w3.toggleClass('#London','marked')">切换类</button>
尝试一下 »