jQuery implémente une démonstration simple du changement d'onglet effect

jQuery implémente une démonstration simple du changement d'onglet effect_jquery

WBOY

Libérer： 2016-05-16 15:30:18

original

1388 Les gens l'ont consulté

L'exemple de cet article est une simple démonstration de l'effet de changement d'onglet de jQuery. Il s'agit entièrement de mon propre processus de réflexion et de mise en œuvre, et je le partage avec vous pour votre référence. Les détails sont les suivants :

Au début, mon cadre de code Html ressemblait à ceci :

<div class="tabs">  
  <ul>
   <li class="acss" data-box="#panel-1">标签1</li>
   <li class="bcss" data-box="#panel-2">标签2</li>
   <li class="bcss" data-box="#panel-3">标签3</li>
  </ul>
  <div id="panel-1">内容111111</div>
  <div id="panel-2" style="display:none;">内容222222</div>
  <div id="panel-3" style="display:none;">内容333333</div>
</div>

Copier après la connexion

Modifié plus tard par le suivant :

<dl class="tabs">
  <dt>
   <a class="acss" href="#panel-1">标签1</a>
   <a class="bcss" href="#panel-2">标签2</a>
   <a class="bcss" href="#panel-3">标签3</a>
  </dt>
  <dd id="panel-1">内容1</dd>
  <dd id="panel-2" style="display:none;">内容2</dd>
  <dd id="panel-3" style="display:none;">内容3</dd>
 </dl>

Copier après la connexion

La raison pour laquelle j'ai changé pour cela est parce que je pense que dl dt dd est moins utilisé que div ul li dans la mise en page, ce qui permet d'obtenir une meilleure isolation. Si nous utilisons js pour faire fonctionner l'objet dl dt dd, cela aura moins d'impact sur les autres éléments de la page. De plus, il n'est pas nécessaire de personnaliser l'attribut data-box dans la balise li, qui est plus conforme à la page. normes de rédaction. Et la sensation générale de cette structure est meilleure que celle ci-dessus.
Le code d'implémentation du plug-in est le suivant :

(function ($) {
   $.fn.Tabs = function (options) {
    //默认参数设置
    var settings = {
     beforeCss: "bcss", //激活前样式名
     afterCss: "acss", //激活后样式名
     model: "mouseover" //切换方式("mouseover"或者"click")
    };

    //不为空，则合并参数
    if (options)
     $.extend(settings, options);

    //获取a标签集合
    var arr_a = $("> dt > a", this);

    //给a标签分别绑定事件
    arr_a.each(function () {
     $(this).bind(settings.model, function (event) {
　　　　　　　　　　　　　　//去除a标签的锚点跳转
    　　　　 event.preventDefault();
      //样式控制
      $(this).removeClass().addClass(settings.afterCss)
      .siblings("a").removeClass().addClass(settings.beforeCss);
      //隐藏与显示控制
      var dd_id = $(this).attr("href");
      $(dd_id).show().siblings("dd").hide();
     });
    });

    //遵循链式原则
    return this.each(function () { });
   };
})(jQuery);

Copier après la connexion

La raison pour laquelle on dit qu'il est léger est que la quantité de code est vraiment petite et très simple. Commentaires ajoutés, je pense que tout le monde peut comprendre.

Le modèle dans les paramètres est utilisé pour contrôler la méthode de commutation :

Quand c'est "clic", cliquez pour changer
Lorsqu'il s'agit d'un "survol de la souris", la souris glisse pour basculer.

Au début, je voulais utiliser le survol pour implémenter la commutation par glissement de la souris, mais j'ai découvert que le survol ne prend pas en charge la liaison. Étant donné que le survol est le produit de jquery encapsulant l'événement mouseover, ce n'est pas un événement authentique et ne peut donc pas être lié.
Voici une DÉMO :

<!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>
 <title></title>
 <style type="text/css">
  *
  {
   margin: 0;
   padding: 0;
  }    
  .tabs
  {
   width: 504px;
   margin: 50px auto;
   }
   
   .acss,.bcss
   {   
   text-decoration:none;
   line-height: 35px;
   font-size: 14px;
   padding:8px 15px;    
   }
   
   .bcss
   {
    background-color: #D4D4D4;
    border-bottom:1px solid white;
    }
   .acss
   {
    background-color: orange;
    border-bottom:1px solid orange;
    }   
   .tabs dd
   {
   width: 500px;
   height: 300px;
   border: 1px solid orange;
   text-align: center;
   line-height: 300px;
   }
 </style>
</head>
<body>
 
 <dl class="tabs" id="tabs1">
  <dt>
   <a class="acss" href="#panel-1">标签1</a>
   <a class="bcss" href="#panel-2">标签2</a>
   <a class="bcss" href="#panel-3">标签3</a>
  </dt>
  <dd id="panel-1"><h1>鼠标滑入切换</h1></dd>
  <dd id="panel-2" style="display:none;">内容2</dd>
  <dd id="panel-3" style="display:none;">内容3</dd>
 </dl> 
 <dl class="tabs" id="tabs2">
  <dt>
   <a class="acss" href="#panel-4">标签1</a><!--默认第一个激活-->
   <a class="bcss" href="#panel-5">标签2</a>
   <a class="bcss" href="#panel-6">标签3</a>
  </dt>
  <dd id="panel-4"><h1>鼠标点击切换</h1></dd><!--默认第一个显示-->
  <dd id="panel-5" style="display:none;">内容2</dd>
  <dd id="panel-6" style="display:none;">内容3</dd>
 </dl>

 <script src="../js/jquery-1.4.1.min.js" type="text/javascript"></script>
 <script src="../js/jquery.similar.Tabs.js" type="text/javascript"></script>
 <script type="text/javascript">
  $("#tabs1").Tabs(); //默认鼠标滑入切换
  $("#tabs2").Tabs({model:"click"}); //设置为点击切换
 </script>
</body>
</html>

Copier après la connexion

Le rendu est le suivant :

J'espère que cet article sera utile à tous ceux qui apprennent la programmation jquery.