您的位置：首页 > Web前端 > JQuery

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

2009-09-23 09:33 405 查看

    这个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-20

来自“网眼视界”：http://blog.why100000.com

“十万个为什么”电脑学习网：http://www.why100000.com

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： jquery tabs border class function xhtml

相关文章推荐

新的分享

章节导航