Posted in Javascript onMarch 10, 2015
今天突然心血来潮,想到一个很简单的方法即可达到的tab效果
其实逻辑很简单,但看到网上基本上没这样写的
不知道实际应用中是否会有问题呢,请大侠指教
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery简易选项卡</title> <style> *{ 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; } </style> </head> <body> <div id="outer"> <ul id="tab"> <li class="current">第一课</li> <li>第二课</li> <li>第三课</li> </ul> <div id="content"> <ul style="display:block;"> 1111 </ul> <ul> 2222 </ul> <ul> 3333 </ul> </div> </div> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script> $(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'); }) } }); </script> </body> </html>
图片演示:
以上就是本文所述的全部内容了,希望大家能够喜欢。
jQuery简单几行代码实现tab切换
- Author -
hebedich声明:登载此文出于传递更多信息之目的,并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@