javascript實(shí)現(xiàn)tab切換特效
本文為大家分享了javascript實(shí)現(xiàn)tab切換特效的方法,具體的實(shí)現(xiàn)內(nèi)容如下,先看一下效果圖:
很簡(jiǎn)單的javascript實(shí)現(xiàn)tab切換特效
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>Tab</title> <script src="js/jquery-1.11.1.js"></script> <style> *{ margin: 0; padding: 0; } div{ width: 184px; height: 100px; border: 1px solid gray; display: none; } .tab{ list-style: none; width: 200px; overflow: hidden; } .tab li{ float: left; width: 60px; border: 1px solid red; height: 30px; line-height: 30px; vertical-align: middle; text-align: center; cursor: pointer; } .on{ display: block; } .cur{ background: red; color: #fff; } </style> <script> $(function(){ $('.tab li').hover(function(){ $(this).addClass('cur').siblings().removeClass('cur'); $("div").eq($(this).index()).addClass("on").siblings().removeClass('on'); }) }) </script> </head> <body> <ul class="tab"> <li class="cur">最新</li> <li>熱門</li> <li>新聞</li> </ul> <div class="on">11</div> <div>22</div> <div>33</div> <br/> <input type="text" value="你好請(qǐng)輸入密碼" onfocus="if(this.value=='你好請(qǐng)輸入密碼'){value=''}" onblur="if(this.value==''){value='你好請(qǐng)輸入密碼'}"> </body> </html>
這個(gè)實(shí)例只是為大家簡(jiǎn)單介紹了javascript實(shí)現(xiàn)tab切換特效,希望對(duì)大家的學(xué)習(xí)有所幫助。
相關(guān)文章
將頁(yè)面table內(nèi)容與樣式另存成excel文件的方法
本文分析一下將頁(yè)面table內(nèi)容與樣式另存成excel文件的方法,主要介紹style與class之間的區(qū)別問(wèn)題。2015-08-08js 獲取坐標(biāo) 通過(guò)JS得到當(dāng)前焦點(diǎn)(鼠標(biāo))的坐標(biāo)屬性
通過(guò)JS得到當(dāng)前焦點(diǎn)的坐標(biāo),如何實(shí)現(xiàn),接下來(lái)詳細(xì)介紹實(shí)現(xiàn)步驟,有需要的朋友可以參考下2013-01-01JS前端攻堅(jiān)淺析instanceof實(shí)現(xiàn)原理
這篇文章主要為大家介紹了JS前端攻堅(jiān)淺析instanceof實(shí)現(xiàn)原理詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-12-12c#程序員對(duì)TypeScript的認(rèn)識(shí)過(guò)程
本文向大家詳細(xì)展示了從C#程序員的視角學(xué)習(xí)TypeScript的過(guò)程,主要是針對(duì)這兩種語(yǔ)言的異同進(jìn)行了簡(jiǎn)單的對(duì)比學(xué)習(xí),希望對(duì)大家能夠有所幫助。2015-06-06如何在javascript 中使用 xmlHttpRequest 發(fā)送 POST
本文將通過(guò)不同的示例解釋如何使用JavaScript代碼在AJAX編程中發(fā)送 XMLHttpRequest post 請(qǐng)求,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2023-07-07JavaScript實(shí)現(xiàn)獲取img的原始尺寸的方法詳解
在微信小程序開發(fā)時(shí),它的image標(biāo)簽有一個(gè)默認(rèn)高度,這樣你的圖片很可能出現(xiàn)被壓縮變形的情況,所以就需要獲取到圖片的原始尺寸對(duì)image的寬高設(shè)置,本文就來(lái)分享一下JavaScript實(shí)現(xiàn)獲取img的原始尺寸的方法吧2023-03-03