超简单的JQUERY tab菜单
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>TAB菜单</title> <script language="javascript" src="jquery.js"></script> <style type="text/css"> #tab{width:300px; height:300px;} #tab ul{margin:0px; padding:0px; list-style:none; background:#999; height:25px;} #tab ul li{display:inline-block; border:1px solid blue; width:30%; text-align:center;} .current{background:#39C;} #tab div{ width:100%; height:250px;} .hide{display:none;} </style> <script language="javascript"> $(function(){ var tli = $('#tab ul li'); var tdiv = $('#tab div'); tli.click(function(){ $(this).addClass('current').siblings().removeClass('current'); var i = $(this).index(); tdiv.eq(i).show().siblings('div').hide(); }) }) </script> </head> <body> <div id="tab"> <ul> <li class="current">菜单一</li> <li>菜单二</li> <li>菜单三</li> </ul> <div class="c1">这是第一个的内容</div> <div class="c2 hide">这是第二个的内容</div> <div class="c3 hide">这是第三个的内容</div> </div> </body> </html>
一个自己做的超简单的TAB菜单，我这个人总是忘，如果你学的东西总是忘的话，那说明不是你没学好，是你压根就学了没用过。
这是我的个人经验。暂且收在百度空间。希望以后能提高我的工作效率
