WEB开发网
开发学院WEB开发Ajax Tab页界面之二,jQuery技术实现 阅读

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

 2009-10-24 11:18:00 来源:WEB开发网   
核心提示: 这个tab页是把数据全部取回来再显示,所以没有数据缓存的特点,Tab页界面之二,jQuery技术实现,但是因为数据全部是显示的html代码,所以对搜索引擎是友好的, 3,界面以table布局,也许对SEO有好处, 代码特点: 1

   这个tab页是把数据全部取回来再显示,所以没有数据缓存的特点。但是因为数据全部是显示的html代码,所以对搜索引擎是友好的,也许对SEO有好处。

   代码特点:
   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” mce_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-20

Tags:Tab 界面 jQuery

编辑录入:爽爽 [复制链接] [打 印]
赞助商链接