本文為大家分享了javascript實(shí)現(xiàn)tab切換特效的方法，具體的實(shí)現(xiàn)內(nèi)容如下，先看一下效果圖：
很簡單的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="你好請輸入密碼" onfocus="if(this.value=='你好請輸入密碼'){value=''}" onblur="if(this.value==''){value='你好請輸入密碼'}"></body></html>這個(gè)實(shí)例只是為大家簡單介紹了javascript實(shí)現(xiàn)tab切換特效，希望對大家的學(xué)習(xí)有所幫助。
新聞熱點(diǎn)
疑難解答
網(wǎng)友關(guān)注
