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

最新推荐文章于 2021-10-14 18:18:56 发布

原创最新推荐文章于 2021-10-14 18:18:56 发布 · 2.6k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #tabs #border #class #function #xhtml

本文介绍了一个基于jQuery的手写Tabs选项卡插件，该插件通过纯前端代码实现Tab逻辑功能，支持灵活的样式定制，并且对SEO友好。

这个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();
//-----------------
});