以下是一个使用jQuery实现表格切换类别的代码示例:
HTML代码:
类别1 - 项目1
类别2 - 项目1
类别3 - 项目1
类别1 - 项目2
类别2 - 项目2
类别3 - 项目2
JavaScript代码:
$(document).ready(function() {
// 默认显示所有项目
$('.item').show();
// 点击类别按钮时切换显示
$('.category-button').click(function() {
var category = $(this).data('category');
// 切换选中按钮的样式
$('.category-button').removeClass('active');
$(this).addClass('active');
// 切换显示对应类别的项目
if (category === 'all') {
$('.item').show();
} else {
$('.item').hide();
$('.item[data-category="' + category + '"]').show();
}
});
});
CSS代码:
.category-button {
padding: 5px 10px;
margin-right: 5px;
cursor: pointer;
}
.category-button.active {
background-color: #ccc;
}
.item {
display: none;
}
这段代码实现了以下功能:
你可以根据实际需求修改HTML、JavaScript和CSS代码,以适应你的项目。
上一篇:表格嵌套在表格单元格中