虽然流行用框架写出来 这里也可以用手写方法写出来 也并不是这么复杂

首先为了实现如下效果的标签

我们可以在前端把两个表直接输出出来 

                <table class = "tag char" id = "tagf" ><tr><td>Found</td><td>Found time</td><td>Found where</td><td>Found detail</td><td>Manipulate</td></tr>......</table><table class = "tag char" id = "tagl" ><tr><td>Lost</td><td>Lost time</td><td>Lost where</td><td>lost detail</td><td>Manipulate</td></tr>......

然后 注明CSS

#tagl{display: none;
}
#tagf{display: none;
}

让两者隐藏 那么 继续绘制按钮

                <button class = "label" id = "ForF" >FOUND</button><button class = "label" id = "ForL" >LOST</button>

最后一步：加上jQuery 监听器 根据用户的动作对其css边框进行变化

    $("#tagl").fadeIn();  $("#ForL").css("border-bottom-color", "white");$("#ForL").css("border-top-color", "tomato");$("#ForL").css("border-top-width", "5px");$("#tagf").hide();$("#ForL").click(function () {//根据点击事件 变化css和不同表的出现$("#tagl").fadeIn();$("#tagf").hide();//下边框变白$("#ForL").css("border-bottom-color", "white");//上边框保持$("#ForL").css("border-top-color", "tomato");$("#ForL").css("border-top-width", "5px");//另一个按钮$("#ForF").css("border-bottom-color", "black");$("#ForF").css("border-top-color", "white");})$("#ForF").click(function () {//相反操作 $("#tagf").fadeIn();$("#tagl").hide();$("#ForF").css("border-bottom-color", "white");$("#ForF").css("border-top-color", "tomato");$("#ForF").css("border-top-width", "5px");//另一个按钮$("#ForL").css("border-bottom-color", "black");$("#ForL").css("border-top-color", "white");})

当用户点击其中一个按钮时 就让另一个表隐藏 然后变化相应的CSS

那么就完成啦！