jQuery简单几行代码实现tab切换.pdfVIP

本文给大家介绍的是一款使用 jQuery 实现的简易选项卡的代码， 通过控制 css 熟悉来实 现 tab 切换，思路清晰，这里推荐给大家。 今天突然心血来潮，想到一个很简单的方法即可达到的 tab 效果 其实逻辑很简单，但看到网上基本上没这样写的 不知道实际应用中是否会有问题呢，请大侠指教 代码如下 : lt;!doctype htmlgt; lt;html lang=engt; lt;headgt; lt;meta charset=UTF-8gt; lt;titlegt;jQuery 简易选项卡 lt;/titlegt; lt;stylegt; *{ margin:0; padding:0;} body, ul, li { margin:0; padding:0; } body { font:12px/1.5 Tahoma; } #outer { width:450px; margin:10px auto; } #tab { overflow:hidden; zoom:1; background:#000; border:1px solid #000; } #tab li { float:left; color:#fff; height:30px; cursor:pointer; line-height:30px; list-style-type:none; padding:0 20px; } #tab li.current { color:#000; background:#ccc; } #content { border:1px solid #000; border-top-width:0; } #content ul { line-height:25px; display:none; margin:0 30px; padding:10px 0; } lt;/stylegt; lt;/headgt; lt;bodygt; lt;div id=outergt; lt;ul id=tabgt; lt;li class=currentgt; 第一课 lt;/ligt; lt;ligt; 第二课 lt;/ligt; lt;ligt; 第三课 lt;/ligt; lt;/ulgt; lt;div id=contentgt; lt;ul style=display:block;gt; 1111 lt;/ulgt; lt;ulgt; 2222 lt;/ulgt; lt;ulgt; 3333 lt;/ulgt; lt;/divgt; lt;/divgt; lt;script src=gt; lt;scriptgt; $(function(){ window.onload = function() { var $li = $(#tab li); var $ul = $(#content ul); $li.click(function(){ $li.removeClass(); var $t = $(this).index(); $(this).addClass(current); $ul.css(display,none); $ul.eq($t).css(display,block); }) } }); lt;/scriptgt; lt;/bodygt; lt;/htmlgt; 图片演示： 以上就是本文所述的全部内容了，希望大家能够喜欢。 更多信息请查看 IT 技术专栏