您现在的位置: 365建站网 > 365学习 > Tab页界面之二,用jQuery技术实现

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

文章来源:365jz.com     点击数:211    更新时间:2009-09-22 09:37   参与评论

    这个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"></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
来自“网眼视界”:http://blog.why100000.com
“十万个为什么”电脑学习网:http://www.why100000.com

如对本文有疑问,请提交到交流论坛,广大热心网友会为你解答!! 点击进入论坛


发表评论 (211人查看0条评论)
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
用户名: 验证码: 点击我更换图片
最新评论
------分隔线----------------------------