前端中标签页的手写方法
生活随笔
收集整理的這篇文章主要介紹了
前端中标签页的手写方法
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
雖然流行用框架寫(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)題。
- 上一篇: android 9格式吗,Android
- 下一篇: 2017年html5行业报告,云适配发布