ホームページ >ウェブフロントエンド >jsチュートリアル >jQuery はタブ切り替えの簡単なデモを実装します。

jQuery はタブ切り替えの簡単なデモを実装します。

WBOYオリジナル: 2016-05-16 15:30:181383ブラウズ

この記事の例は、jQuery のタブ切り替え効果の簡単なデモンストレーションです。これは完全に私自身の考えと実装プロセスであり、参考のために共有します。詳細は以下の通りです。

最初、私の HTML コードフレームは次のように見えました:

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

後に次のように変更されました:

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

これに変更した理由は、ページレイアウトでは dl dt dd の使用が div ul li よりも少なく、分離性が向上すると考えたからです。 js を使用して dl dt dd オブジェクトを操作すると、ページ上の他の要素への影響が少なくなります。また、li タグの data-box 属性をカスタマイズする必要がなく、よりページに沿ったものになります。執筆基準。そして、この構造の全体的な感触は上記のものよりも優れています。
プラグインの実装コードは次のとおりです:

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

軽いと言われる理由は、コード量が本当に少なく、とてもシンプルだからです。コメントを追加しました。誰もが理解できると思います。

設定のモデルは、切り替え方法を制御するために使用されます:

「クリック」の場合、クリックして切り替えます。

最初はホバーを使用してマウスのスライドイン切り替えを実装しようとしましたが、ホバーはバインドバインディングをサポートしていないことがわかりました。 hover は、mouseover イベントをカプセル化する jquery の製品であるため、本物のイベントではないため、バインドできません。

これがデモです:

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

レンダリングは次のとおりです:

この記事が jquery プログラミングを学習するすべての人に役立つことを願っています。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：Bootstrapフォーム(フォームボタン)の使い方を徹底分析_JavaScriptスキル次の記事：Bootstrapフォーム(フォームボタン)の使い方を徹底分析_JavaScriptスキル

続きを見る

jQuery はタブ切り替えの簡単なデモを実装します。

関連記事