jQuery implementiert eine einfache Demonstration des Tab-Switching-Effekts

jQuery implementiert eine einfache Demonstration des Tab-Switching-Effekts_jquery

WBOY

Freigeben： 2016-05-16 15:30:18

Original

1370 Leute haben es durchsucht

Das Beispiel in diesem Artikel ist eine einfache Demonstration des Tab-Wechseleffekts von jQuery. Es ist vollständig mein eigener Denk- und Implementierungsprozess und ich teile ihn als Referenz mit Ihnen. Die Details lauten wie folgt:

Zuerst sah mein HTML-Coderahmen so aus:

<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>

Nach dem Login kopieren

Später wie folgt geändert:

<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>

Nach dem Login kopieren

Der Grund, warum ich dazu gewechselt habe, ist, dass ich denke, dass dl dt dd im Seitenlayout weniger verwendet wird als div ul li, wodurch eine bessere Isolierung erreicht werden kann. Wenn wir js verwenden, um das dl dt dd-Objekt zu bedienen, hat dies weniger Auswirkungen auf andere Elemente auf der Seite. Darüber hinaus ist es nicht erforderlich, das data-box-Attribut im li-Tag anzupassen, was eher der Seite entspricht Schreibstandards. Und der Gesamteindruck dieser Struktur ist besser als der oben.
Der Implementierungscode des Plug-Ins lautet wie folgt:

(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);

Nach dem Login kopieren

Der Grund, warum es als leichtgewichtig bezeichnet wird, liegt darin, dass die Codemenge wirklich klein und sehr einfach ist. Kommentare hinzugefügt, ich glaube, jeder kann es verstehen.

Das Modell in den Einstellungen wird verwendet, um die Umschaltmethode zu steuern:

Wenn es „klick“ ist, klicken Sie, um zu wechseln

Zuerst wollte ich Hover verwenden, um den Maus-Slide-In-Wechsel zu implementieren, aber ich stellte fest, dass Hover die Bindungsbindung nicht unterstützt. Da Hover das Produkt der JQuery-Kapselung des Mouseover-Ereignisses ist, handelt es sich nicht um ein authentisches Ereignis und kann daher nicht gebunden werden.

Hier ist eine DEMO:

<!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>

Nach dem Login kopieren

Die Darstellung ist wie folgt:

Ich hoffe, dass dieser Artikel für alle hilfreich ist, die die JQuery-Programmierung erlernen.