用jQuery技术实现Tab页界面之二

这是第二篇文章，第一篇可以参考Tab页界面，用jQuery及Ajax技术实现代码特点： 1，完全实现Tab逻辑功能，Tab的样式完全交由前端代码控制，很灵活。 2，tab页触发事件是click。 3，界面以table布局，只需要配置关键对象的class和id 即可工作。复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>我的Tabs选项卡</title> <style type="text/css"> body {font-size:12px; } .tab {background:url(images/gray.png); cursor:hand;} </style> <script type="text/javascript" src="jquery/jquery-1.2.6.min.js"></script> <script type="text/javascript"> $(document).ready(function() { //------------------------- var tabclass = ".tab"; //tab 数组 id var tabs = ["#tab1", "#tab2", "#tab3"]; //tab 数组 id var datas = ["#data1", "#data2", "#data3"]; var tab_selected_bgimg = "images/green.png"; var tab_unselected_bgimg = "images/gray.png"; var tab_selected_txtcolor = "#ff6600"; var tab_unselected_txtcolor = "#666666"; var curr_index; $(tabclass).click(function() { for(var i=0;i<tabs.length;i++) { if($(tabs[i]).attr("id")==$(this).attr("id")) { curr_index = parseInt(i)+1; } $(tabs[i]).css("background-image", "url("+ tab_unselected_bgimg +")"); $(tabs[i]).css("color", tab_unselected_txtcolor); $(datas[i]).hide(); } $(this).css("background-image", "url("+ tab_selected_bgimg +")"); $(this).css("color", tab_selected_txtcolor); $("#data"+curr_index).show(); }); $("#tab1").click(); //----------------- }); </script> </head> <body> <table border="0" width="500" height="25" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td width="97" class="tab" id="tab1">tab1</td> <td width="30"></td> <td width="97" class="tab" id="tab2">tab2</td> <td width="30"></td> <td width="97" class="tab" id="tab3">tab3</td> <td width="149"></td> </tr> </table> <table border="1" width="500" height="60" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td> <div id="data1"> this is data1 </div> <div id="data2"> this is data2 </div> <div id="data3"> this is data3 </div> </td> </tr> </table> </body> 张庆(网眼) 2009-9-21

如果不清楚innerHtml的脚本如何运行的可以参考这篇文章http://www.jb51.net/article/234.htm下面的代码目的就是防止有些网站需要将一些特别的广告放到script中，大家可以完全用iframe替换，联盟广告大家可以用后加>>>详细阅读

本文标题：用jQuery技术实现Tab页界面之二

地址：http://www.17bianji.com/kaifa2/JS/28080.html

1/2 1