雖然流行用框架寫(xiě)出來(lái) 這里也可以用手寫(xiě)方法寫(xiě)出來(lái) 也并不是這么復(fù)雜

首先為了實(shí)現(xiàn)如下效果的標(biāo)簽

我們可以在前端把兩個(gè)表直接輸出出來(lái)?

<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; }

讓兩者隱藏 那么 繼續(xù)繪制按鈕

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

最后一步：加上jQuery 監(jiān)聽(tīng)器 根據(jù)用戶的動(dòng)作對(duì)其css邊框進(jìn)行變化

$("#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 () {//根據(jù)點(diǎn)擊事件 變化css和不同表的出現(xiàn)$("#tagl").fadeIn();$("#tagf").hide();//下邊框變白$("#ForL").css("border-bottom-color", "white");//上邊框保持$("#ForL").css("border-top-color", "tomato");$("#ForL").css("border-top-width", "5px");//另一個(gè)按鈕$("#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");//另一個(gè)按鈕$("#ForL").css("border-bottom-color", "black");$("#ForL").css("border-top-color", "white");})

當(dāng)用戶點(diǎn)擊其中一個(gè)按鈕時(shí) 就讓另一個(gè)表隱藏 然后變化相應(yīng)的CSS

那么就完成啦！

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。