JavaScript小工具--TAB选项卡切换隐藏显示动画效果

开发中经常会遇到TAB选项卡：点击对应的选项卡，该选项卡为active状态，其余为未选中状态，同时显示对应的TAB内容。如下

以下为简化例子：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>测试TAB</title>
<link href="CSS/style_right.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../js/jquery-1.11.3.js"></script>
<script type="text/javascript" src="../js/tabFactory.js"></script>
</head>
<style type="text/css">
  .active{background-color: #ccc;}
</style>
<body>
  <ul id="tabTitleUlId">
    <li>title1</li>
    <li>title2</li>
    <li>title3</li>
  </ul>
  <ul id="tabContentUlId">
    <li>content1</li>
    <li>content2</li>
    <li>content3</li>
  </ul>
  
</body>
</html>

编写一个通用的jQuery方法，以便以后方便使用

/*
*
*用途：将TAB选择卡设置效果。
*初始状态--title中的第一个title为选中效果，其余不是，content中第一个content显示，其余content隐藏
*使用效果： 点击或鼠标移至TAB选项卡的title，title的class为选中效果，其他title为非选中效果，title对应的content项显示，其他content隐藏
*使用前提：每一个title放在一个<ul>标签下的<li>标签中 每一个content放在另一个<ul>标签的<li>中 title的选中效果的class设置在li标签中 例如：
<ul id="tabTitleUlId">
  <li class="actived">title1</li>
  <li>title2</li>
  <li>title3</li>
</ul>
<ul id="tabContentUlId">
  <li>content1</li>
  <li>content2</li>
  <li>content3</li>
</ul>
********/
$(function(){
  //定义jQurey新方法 用 $.newMethodName = function(a,b,c){...}  定义完后就可以用$.newMethodName(a,b,c)使用了
  $.jqtab = function(tabTitleUlId , tabContentUlId , titleActiveClassName , actionName){
    //首先把所有content隐藏
    $("#"+tabContentUlId).find("li").hide();
    //其次再把第一个content显示出来
    //$("#"+tabContentUlId).find("li:first").show();同样效果
    $("#"+tabContentUlId).find("li").first().show();

    //把所有title都重置并把第一个li设置为active
    $("#" + tabTitleUlId).find("li").removeClass(titleActiveClassName);
    $("#" + tabTitleUlId).find("li:first").addClass(titleActiveClassName);

    $("#"+tabTitleUlId).children("li").bind(actionName , function(){
      //点击后对应的title为选中状态，其他为非选中
      $(this).addClass(titleActiveClassName).siblings("li").removeClass(titleActiveClassName);

      var index = $("#"+tabTitleUlId).children("li").index(this);//注意这里是this 不是$(this)
      $("#"+tabContentUlId).children("li").eq(index).show().siblings().hide();
    })
  }
});

这个通用的方法有以下参数

tabTitleUlId:title的ul标签的id

tabContentUlId:content的ul标签的id

titleActiveClassName:title选中时的classname

actionName：触发事件的方式如"click"

使用方法也很简单：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>测试TAB</title>
<link href="CSS/style_right.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../js/jquery-1.11.3.js"></script>
<script type="text/javascript" src="../js/tabFactory.js"></script>
</head>
<style type="text/css">
  .active{background-color: #ccc;}
</style>
<body>
  <ul id="tabTitleUlId">
    <li>title1</li>
    <li>title2</li>
    <li>title3</li>
  </ul>
  <ul id="tabContentUlId">
    <li>content1</li>
    <li>content2</li>
    <li>content3</li>
  </ul>
  <script type="text/javascript">
//直接调用新的JQuery方法
  $(function(){
    $.jqtab("tabTitleUlId" ,"tabContentUlId" ,"active" , "click" )
  });
  </script>
</body>
</html>

posted on 2016-03-06 22:07 heyucool 阅读(1383) 评论(0) 编辑收藏举报