Erfahren Sie mehr über die Registerkarte Tab in Bootstrap

Dieser Artikel führt Sie durch die Tab-Registerkarte in Bootstrap. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.

Tabs sind eine sehr häufig verwendete Funktion im Web. Wenn der Benutzer auf den Menüpunkt klickt, kann der entsprechende Inhalt ausgeblendet werden. In diesem Artikel wird die Bootstrap-Registerkarte im Detail vorgestellt sind die Navigationsregisterkarten von Bootstrap. und nur der aktuelle Panelinhalt wird angezeigt

.tab-content > .tab-pane {
    display: none;
}
.tab-content > .active {
    display: block;
}

　Die Registerkarte definiert das Datenattribut, um den Umschalteffekt auszulösen. Voraussetzung ist natürlich, dass zuerst bootstrap.js oder tab.js geladen wird. Deklarative auslösende Registerkarten müssen die folgenden Anforderungen erfüllen:

　1. Setzen Sie data-toggle="tab"　 im Tab-Navigationslink 2. Und legen Sie data-target=" selector des entsprechenden Inhaltsbereichs (normalerweise ID)" fest; Wenn es sich um einen Link handelt, können Sie auch href="den Selektor des entsprechenden Inhaltsbereichs (normalerweise ID)" verwenden. Die Hauptfunktion besteht darin, dass der Benutzer beim Klicken den dem Selektor entsprechenden Bereich für den Inhalt des Panels finden kann.

　3. Der Panel-Inhalt wird einheitlich im Tab-Content-Container platziert, und für jedes Content-Panel-Tab-Fenster muss ein unabhängiger Selektor (vorzugsweise ID) festgelegt werden, der mit dem Wert von data-target oder href im Tab übereinstimmt

【Einblendeffekt】

Um den Wechselvorgang beim Einblenden und Ausblenden des Bedienfelds reibungsloser zu gestalten, können Sie dem Bedienfeld die Einblendung des Klassennamens hinzufügen, um einen Einblendeffekt zu erzeugen.

　Beim Hinzufügen des Fade-Stils muss das anfänglich standardmäßig angezeigte Inhaltsfeld mit dem Klassennamen hinzugefügt werden, sonst kann der Benutzer seinen Inhalt nicht sehen

<!-- 选项卡菜单-->
<ul id="myTab" class="nav nav-tabs" role="tablist">
    <li class="active"><a href="#bulletin" role="tab" data-toggle="tab">公告</a></li>
    <li><a href="#rule" role="tab" data-toggle="tab">规则</a></li>
    <li><a href="#forum" role="tab" data-toggle="tab">论坛</a></li>
    <li><a href="#security" role="tab"  data-toggle="tab">安全</a></li>
    <li><a href="#welfare" role="tab" data-toggle="tab">公益</a></li>
</ul>
<!-- 选项卡面板 -->
<div id="myTabContent" class="tab-content">
    <div class="tab-pane active" id="bulletin">公告内容面板</div>
    <div class="tab-pane " id="rule">规则内容面板</div>
    <div class="tab-pane " id="forum">论坛内容面板</div>
    <div class="tab-pane " id="security">安全内容面板</div>
    <div class="tab-pane " id="welfare">公益内容面板</div>
</div>

【Kapselregisterkarte】

In Bootstrap , zusätzlich zu Zusätzlich zur Navigations-Tabs mit Tab-Wechselfunktion können Sie auch festlegen, dass die Kapsel-Nav-Pillen-Navigation auch über die Tab-Funktion verfügt. Ersetzen Sie einfach Nav-Tabs durch Nav-Pillen. Ein weiterer wichtiger Punkt ist das Ersetzen von data-toggle="tab" durch data-toggle= "pill "

<!-- 选项卡菜单-->
<ul id="myTab" class="nav nav-tabs" role="tablist">
    <li class="active"><a href="#bulletin" role="tab" data-toggle="tab">公告</a></li>
    <li><a href="#rule" role="tab" data-toggle="tab">规则</a></li>
    <li><a href="#forum" role="tab" data-toggle="tab">论坛</a></li>
    <li><a href="#security" role="tab"  data-toggle="tab">安全</a></li>
    <li><a href="#welfare" role="tab" data-toggle="tab">公益</a></li>
</ul>
<!-- 选项卡面板 -->
<div id="myTabContent" class="tab-content">
    <div class="tab-pane fade in active" id="bulletin">公告内容面板</div>
    <div class="tab-pane fade" id="rule">规则内容面板</div>
    <div class="tab-pane fade" id="forum">论坛内容面板</div>
    <div class="tab-pane fade" id="security">安全内容面板</div>
    <div class="tab-pane fade" id="welfare">公益内容面板</div>
</div>

JS-Trigger

　Zusätzlich zum Festlegen der Datenumschaltung in HTML zum Auslösen von Tabs kann es auch direkt über JavaScript aufgerufen werden.

　 Rufen Sie die Methode tab("show") im Klickereignis jedes Links auf, um den entsprechenden Inhalt des Tab-Panels anzuzeigen. Löschen Sie für das obige Beispiel die benutzerdefinierten Attribute data-toggle="tab" oder data-toggle="pill" in HTML und rufen Sie dann

<!-- 选项卡菜单-->
<ul id="myTab" class="nav nav-pills" role="tablist">
    <li class="active"><a href="#bulletin" role="tab" data-toggle="pill">公告</a></li>
    <li><a href="#rule" role="tab" data-toggle="pill">规则</a></li>
    <li><a href="#forum" role="tab" data-toggle="pill">论坛</a></li>
    <li><a href="#security" role="tab" data-toggle="pill">安全</a></li>
    <li><a href="#welfare" role="tab" data-toggle="pill">公益</a></li>
</ul>
<!-- 选项卡面板 -->
<div id="myTabContent" class="tab-content">
    <div class="tab-pane fade in active" id="bulletin">公告内容面板</div>
    <div class="tab-pane fade" id="rule">规则内容面板</div>
    <div class="tab-pane fade" id="forum">论坛内容面板</div>
    <div class="tab-pane fade" id="security">安全内容面板</div>
    <div class="tab-pane fade" id="welfare">公益内容面板</div>
</div>

$(function(){
    $("#myTab a").click(function(e){
        e.preventDefault();
        $(this).tab("show");
    });
})

data-toggle="tab"换成data-toggle="pill"

    
公告
    
规则
    
论坛
    
安全
    
公益



    
公告内容面板
    
规则内容面板
    
论坛内容面板
    
安全内容面板
    
公益内容面板

<script>
$(function(){
    $(&quot;#myTab a&quot;).click(function(e){
        e.preventDefault();
        $(this).tab(&quot;show&quot;);
    });
})
</script>

JS触发

　　除了在HTML设置 data-toggle 来触发选项卡之外，还可以通过JavaScript直接调用。

　　在每个链接的单击事件中调用tab("show")[Event Subscription]

show.bs.tab        show方法调用之后立即触发该事件
shown.bs.tab   　　 此事件在tab已经显示出来（并且同时在 CSS 过渡效果完成）之后被触发
hide.bs.tab        hide方法调用之后立即触发该事件。
hidden.bs.tab    　此事件在tab被隐藏（并且同时在 CSS 过渡效果完成）之后被触发

<!-- 选项卡菜单-->
<ul id="myTab" class="nav nav-pills" role="tablist">
    <li class="active"><a href="#bulletin" role="tab">公告</a></li>
    <li><a href="#rule" role="tab" >规则</a></li>
    <li><a href="#forum" role="tab" >论坛</a></li>
    <li><a href="#security" role="tab" >安全</a></li>
    <li><a href="#welfare" role="tab" >公益</a></li>
</ul>
<!-- 选项卡面板 -->
<div id="myTabContent" class="tab-content">
    <div class="tab-pane fade in active" id="bulletin">公告内容面板</div>
    <div class="tab-pane fade" id="rule">规则内容面板</div>
    <div class="tab-pane fade" id="forum">论坛内容面板</div>
    <div class="tab-pane fade" id="security">安全内容面板</div>
    <div class="tab-pane fade" id="welfare">公益内容面板</div>
</div>
<script>
$(function(){
    $("#myTab a").click(function(e){
        e.preventDefault();
        $(this).tab("show");
    });
    $("#myTab").on("show.bs.tab",function(e){
         $(e.target).css(&#39;outline&#39;,&#39;1px solid black&#39;);    
    }).on("hide.bs.tab",function(e){
        $(e.target).css(&#39;outline&#39;,&#39;none&#39;);  
    })
})
</script>

über das folgende Skript auf

JS-Quellcode

【1】IIFE

Verwenden Sie die Sofortaufruffunktion, um zu verhindern, dass der Code im Plug-In ausläuft, wodurch eine geschlossene Schleife entsteht, und kann nur über jQuerys fn erweitert werden

+function ($) {
    //使用es5严格模式
    'use strict';
    //
}(window.jQuery);

【2 】Anfangseinstellungen

var Tab = function (element) {
    //指定当前元素
    this.element = $(element)
  }
  //版本号为3.3.7
  Tab.VERSION = '3.3.7'
  //动画时间为150ms
  Tab.TRANSITION_DURATION = 150

【3】Plug-in-Kerncode

//show()方法用于触发show事件，调用activate原型方法，触发shown事件
  Tab.prototype.show = function () {
    //当前tab
    var $this    = this.element
    //找到最近的ul
    var $ul      = $this.closest('ul:not(.dropdown-menu)')
    //找到data-target值
    var selector = $this.data('target')
    //如果data-target值不存在，查找href值
    if (!selector) {
      selector = $this.attr('href')
      //IE7特殊处理
      selector = selector && selector.replace(/.*(?=#[^\s]*$)/, '') 
    }
    //如果当前tab已经是活动状态了，即父元素li上已经有active样式的话，直接返回
    if ($this.parent('li').hasClass('active')) return
    //找到上一个元素，即上一个带有active样式的li里的a元素
    var $previous = $ul.find('.active:last a')
    //设置hide事件
    var hideEvent = $.Event('hide.bs.tab', {
      relatedTarget: $this[0]
    })
    //设置show事件
    var showEvent = $.Event('show.bs.tab', {
      relatedTarget: $previous[0]
    })
    //触发hide事件及show事件
    $previous.trigger(hideEvent)
    $this.trigger(showEvent)
    //如果自定义回调中阻止了默认行为，则不再继续处理
    if (showEvent.isDefaultPrevented() || hideEvent.isDefaultPrevented()) return
    //要激活显示的面板，即target或href里的值所对应的元素
    var $target = $(selector)
    //高亮显示当前tab
    this.activate($this.closest('li'), $ul)
    //显示对应的面板，并在回调里触发hidden及shown事件
    this.activate($target, $target.parent(), function () {
      $previous.trigger({
        type: 'hidden.bs.tab',
        relatedTarget: $this[0]
      })
      $this.trigger({
        type: 'shown.bs.tab',
        relatedTarget: $previous[0]
      })
    })
  }
  //active样式的应用，面板的显示和隐藏，以及tab的高亮与反高亮
  Tab.prototype.activate = function (element, container, callback) {
    //查找当前容器所有有active样式的元素
    var $active    = container.find('> .active')
    //判断是使用回调还是动画
    var transition = callback
      && $.support.transition
      && ($active.length && $active.hasClass('fade') || !!container.find('> .fade').length)

    function next() {
      $active
        //去除其他元素的active样式
        .removeClass('active')
        //包括li元素里面的下拉菜单里的active样式也要去除
        .find('> .dropdown-menu > .active')
          .removeClass('active')
        .end()
        .find('[data-toggle="tab"]')
          .attr('aria-expanded', false)

      element
        //给当前被单击的元素添加active高亮样式
        .addClass('active')
        .find('[data-toggle="tab"]')
          .attr('aria-expanded', true)

      if (transition) {
        //如果支持动画，就重绘页面
        element[0].offsetWidth 
        //并添加in样式，去除透明
        element.addClass('in')
      } else {
        //否则删除fade
        element.removeClass('fade')
      }
      //如果单击的是下拉菜单里的项目
      if (element.parent('.dropdown-menu').length) {
        element
          //打到最近的li.dropdown元素进行高亮
          .closest('li.dropdown')
            .addClass('active')
          .end()
          .find('[data-toggle="tab"]')
            .attr('aria-expanded', true)
      }
      //如果有回调就执行回调
      callback && callback()
    }
    //如果支持动画
    $active.length && transition ?
      $active
        //在动画结束后执行next()
        .one('bsTransitionEnd', next)
        .emulateTransitionEnd(Tab.TRANSITION_DURATION) :
      next()

    $active.removeClass('in')
  }

【4】jQuery-Plug-in-Definition

function Plugin(option) {
    //根据选择器，遍历所有符合规则的元素
    return this.each(function () {
      var $this = $(this)
      //获取自定义属性bs.tab的值
      var data  = $this.data('bs.tab')
      //如果值不存在，则将Tab实例设置为bs.tab值
      if (!data) $this.data('bs.tab', (data = new Tab(this)))
      //如果option传递了string，则表示要执行某个方法  
      if (typeof option == 'string') data[option]()
    })
  }

  var old = $.fn.tab
  //保留其他库的$.fn.tab代码(如果定义的话)，以便在noConflict之后可以继续使用该老代码
  $.fn.tab             = Plugin
  //重设插件构造器，可以通过该属性获取插件的真实类函数
  $.fn.tab.Constructor = Tab

【5】Anti-Konflikt-Verarbeitung

$.fn.tab.noConflict = function () {
     //恢复以前的旧代码
    $.fn.tab = old
    //将$.fn.tab.noConflict()设置为Bootstrap的Tab插件
    return this
  }

【6】Bindende Triggerereignisse

var clickHandler = function (e) {
    //阻止默认行为
    e.preventDefault()
    //触发show()方法
    Plugin.call($(this), 'show')
  }

  $(document)
    //在document上绑定单击事件
    .on('click.bs.tab.data-api', '[data-toggle="tab"]', clickHandler)
    .on('click.bs.tab.data-api', '[data-toggle="pill"]', clickHandler)

Für weitere Programmierung -bezogenes Wissen finden Sie unter:

Programmiervideos

! !

Das obige ist der detaillierte Inhalt vonErfahren Sie mehr über die Registerkarte Tab in Bootstrap. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!