雖然流行用框架寫出來 這里也可以用手寫方法寫出來 也并不是這么復雜

首先為了實現如下效果的標簽

我們可以在前端把兩個表直接輸出出來?

<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

那么就完成啦！

總結

以上是生活随笔為你收集整理的前端中标签页的手写方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。