GVKun编程网logo

js选项卡功能（js选项卡功能实现）

24

对于想了解js选项卡功能的读者，本文将提供新的信息，我们将详细介绍js选项卡功能实现，并且为您提供关于01.关于easyui实现右键关闭tabs选项卡功能、Bootstrap中的选项卡功能讲解、Har

对于想了解js选项卡功能的读者，本文将提供新的信息，我们将详细介绍js选项卡功能实现，并且为您提供关于01.关于easyui实现右键关闭tabs选项卡功能、Bootstrap中的选项卡功能讲解、HarmonyOS NEXT 底部选项卡功能、Ionic Js选项卡的有价值信息。

本文目录一览：

js选项卡功能（js选项卡功能实现）

js选项卡功能（js选项卡功能实现）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js选项卡功能</title>
    <style>
        .btn {
            width: 60px;
            hieght: 30px;
        }
 
        .content {
            width: 200px;
            height: 200px;
            border: 1px solid #b1b3b0;
            display: none;
        }
 
        .on {
            background: #2d64b3;
            color: #fff;
        }
 
    </style>
</head>
<body>
<button>导航1</button>
<button>导航2</button>
<button>导航3</button>
<div>内容1</div>
<div>内容2</div>
<div>内容3</div>
</body>
<script>
    var btn = document.getElementsByTagName(''button'');
    var content = document.getElementsByClassName(''content'');
    for (var i = 0; i < btn.length; i++) {
        (function (n) {
            btn[i].onclick = function () {
                for (var j = 0; j < btn.length; j++) {
                    btn[j].className = "";
                    content[j].style.display = ''none''
                }
                this.className = "on";
                content[n].style.display = ''block''
            }
        }(i))
    }
</script>
</html>

 

01.关于easyui实现右键关闭tabs选项卡功能

01.关于easyui实现右键关闭tabs选项卡功能

js部分

            /*
       　　   *   添加右击table菜单栏事件
       　　   */
    $("#tabs").tabs({
        //为其附加鼠标右键事件
        onContextMenu: function(e, title, index){
            //该方法通知浏览器不要执行与此事件关联的默认动作
            //即屏蔽了浏览器在tab页上的鼠标右键事件
            e.preventDefault();
            var mm = $("#tabsmenu");
            //显示右键菜单
            mm.menu("show",{
                top: e.pageY,
                left: e.pageX
            }).data("tabTitle",title);
            //为右键菜单选项绑定事件
            mm.menu({
                onClick: function(item){
                    closeTab(this, item.name);
                }
            });
        }
    });

    /*
     * 关闭tabs方法的具体实现
     */
    function closeTab(menu, type){
        //返回所有的选项卡
        var allTabs = $("#tabs").tabs("tabs");
        var allTabTitle = [];
        // console.log(allTabs);这里是dom节点
        $.each(allTabs, function(i, n){
            // console.log(n);这里是当前打开的每一个tabs的jQuery对象
            //这里是返回的options对象
            var opt = $(n).panel("options");
            if(opt.closable){//如果显示关闭按钮
                //就把当前选中的选项卡的标题放入空数组中
                allTabTitle.push(opt.title);
            }
        });
        //这里是将获取当前选项卡的标题
        var curTabTitle = $(menu).data("tabTitle");
        switch(type){
            case 1:
                //关闭当前 -- 这里是根据选项卡的标题来关闭选项卡
                $("#tabs").tabs("close", curTabTitle);
                return false;
                break;
            case 2:
                //关闭其他
                for(var i = 0; i < allTabTitle.length; i++){
                    if(curTabTitle != allTabTitle[i]){
                        $("#tabs").tabs("close",allTabTitle[i]);
                    }
                }
                //这里是关闭完了其他选项卡之后，就选中当前选项卡
                $("#tabs").tabs("select",curTabTitle);
                break;


            case 3:
                //关闭右侧
                for(var i = 0; i < allTabTitle.length; i++){
                    //先通过循环遍历，获取出当前选项卡所对应的下标
                    if(curTabTitle == allTabTitle[i]){//相等的时候表示为当前，如果大于表示右侧，如果小于，表示左侧
                        //关闭右侧，其实就是关闭下标比当前下标大一些的选项卡
                        for (var j = i + 1; j < allTabTitle.length; j++) {
                            //然后这里的循环就从i+1开始，只要小于所有选项卡数组的长度，就直接删除
                            $("#tabs").tabs("close",allTabTitle[j]);//关闭右侧就关闭i+1
                        }
                    }
                }
                break;

            case 4:
                //关闭左侧
                for(var i = 0; i < allTabTitle.length; i++){
                    //先通过循环遍历，获取出当前选项卡所对应的下标
                    if(curTabTitle == allTabTitle[i]){//相等的时候表示为当前，如果大于表示右侧，如果小于，表示左侧
                        //这里关闭左侧的原理，就是关闭比当前选中选项卡的下标要小的选项卡
                        for (var j = 0; j < i; j++) {//这里就从0开始删，到i-1结束
                            //这里就是开始循环删除，只要j是小于i的就直接删除
                            $("#tabs").tabs("close",allTabTitle[j]);//关闭右侧就关闭i+1
                        }
                    }
                }
                break;

            case 5:
                //关闭所有
                for(var i = 0; i < allTabTitle.length; i++){
                    $("#tabs").tabs("close",allTabTitle[i]);
                }
                break;
        }
    }
});

html

<head>
    <%@include file="common/header.jsp"%>
<%--    <link rel="stylesheet" href="/static/css/main.css">--%>
    <title>Title</title>
    <script type="text/javascript" src="/static/js/module/main.js"></script>
</head>
<body>
<%--右键关闭选项卡--%>
<div id="tabsmenu">
    <div data-options="name:1" id="now" iconcls="icon-shield">关闭当前</div>
    <div data-options="name:2" id="other" iconcls="icon-shield">关闭非当前</div>
    <div data-options="name:3" id="right" iconcls="icon-shield">关闭右侧所有</div>
    <div data-options="name:4" id="left" iconcls="icon-shield">关闭左侧所有</div>
    <div data-options="name:5" id="all" iconcls="icon-shield">关闭所有</div>
</div>

Bootstrap中的选项卡功能讲解

Bootstrap中的选项卡功能讲解

前面的话

　　选项卡tabs是web中一种非常常用的功能。用户点击对菜单项，能切换出对应的内容。本文将详细介绍bootstrap选项卡

基本用法

　　Bootstrap框架中的选项卡主要有两部分内容组成：

　　1、选项卡菜单组件，对应的是 Bootstrap的 nav-tabs

　　2、可以切换的选项卡面板组件，在 Bootstrap 中通常 tab-pane 来表示

　　在Bootstrap框架中选项卡nav-tabs已带有样式，而对于面板内容tab-pane都是隐藏的，只有当前面板内容才是显示的

.tab-content &gt; .tab-pane {display: none;
}.tab-content &gt; .active {display: block;
}
登录后复制

　　选项卡定义data属性来触发切换效果。当然前提要先加载bootstrap.js或者是tab.js。声明式触发选项卡需要满足以下几点要求：

　　1、选项卡导航链接中要设置 data-toggle="tab"

　　2、并且设置 data-target="对应内容面板的选择符(一般是ID)"；如果是链接的话，还可以通过 href="对应内容面板的选择符(一般是ID)"，主要作用是用户点击的时候能找到该选择符所对应的面板内容 tab-pane。

　　3、面板内容统一放在 tab-content 容器中，而且每个内容面板 tab-pane 都需要设置一个独立的选择符（最好是ID）与选项卡中的 data-target 或 href 的值匹配

<!-- 选项卡菜单-->
登录后复制
登录后复制
登录后复制
登录后复制
  • 公告
  • 规则
  • 论坛
  • 安全
  • 公益
公告内容面板
规则内容面板
论坛内容面板
安全内容面板
公益内容面板

【渐入效果】

　　为了让面板的隐藏与显示在切换的过程效果更流畅，可以在面板中添加类名 fade，让其产生渐入的效果。

　　在添加 fade 样式时，最初的默认显示的内容面板一定要加上 in 类名，不然用户无法看到其内容

<!-- 选项卡菜单-->
登录后复制
登录后复制
登录后复制
登录后复制
  • 公告
  • 规则
  • 论坛
  • 安全
  • 公益
公告内容面板
规则内容面板
论坛内容面板
安全内容面板
公益内容面板

【胶囊式选项卡】

　　在Bootstrap除了可以让 nav-tabs 具有选项卡的切换功能之外，还可以让胶囊式 nav-pills 导航也具有选项卡的功能。只需要将 nav-tabs 换成 nav-pills，另外关键一点是将 data-toggle="tab"换成data-toggle="pill"

<!-- 选项卡菜单-->
登录后复制
登录后复制
登录后复制
登录后复制
  • 公告
  • 规则
  • 论坛
  • 安全
  • 公益
公告内容面板
规则内容面板
论坛内容面板
安全内容面板
公益内容面板

 

JS触发

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

　　在每个链接的单击事件中调用tab("show")方法，显示对应的标签面板内容。针对上面的示例，删除HTML中自定义的 data-toggle="tab" 或 data-toggle="pill" 的属性，然后通过下面的脚本来调用

$(function(){
    $("#myTab a").click(function(e){
        e.preventDefault();
        $(this).tab("show");
    });
})
登录后复制
<!-- 选项卡菜单-->
登录后复制
登录后复制
登录后复制
登录后复制
  • 公告
  • 规则
  • 论坛
  • 安全
  • 公益
公告内容面板
规则内容面板
论坛内容面板
安全内容面板
公益内容面板
<script>$(function(){ $("#myTab a").click(function(e){ e.preventDefault(); $(this).tab("show"); }); })</script>

【事件订阅】

show.bs.tab        show方法调用之后立即触发该事件
shown.bs.tab   　　 此事件在tab已经显示出来（并且同时在 CSS 过渡效果完成）之后被触发
hide.bs.tab        hide方法调用之后立即触发该事件。
hidden.bs.tab    　此事件在tab被隐藏（并且同时在 CSS 过渡效果完成）之后被触发
登录后复制
<!-- 选项卡菜单-->
登录后复制
        
  • 公告
    •     
  • 规则
    •     
  • 论坛
    •     
  • 安全
    •     
  • 公益
    
公告内容面板
    
规则内容面板
    
论坛内容面板
    
安全内容面板
    
公益内容面板
<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>

 

JS源码

【1】IIFE

　　使用立即调用函数，防止插件内代码外泄，从而形成一个闭环，并且只能从jQuery的fn里进行扩展

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

【2】初始设置

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

【3】插件核心代码

  //show()方法用于触发show事件，调用activate原型方法，触发shown事件
  Tab.prototype.show = function () {//当前tabvar $this    = this.element//找到最近的ulvar $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 &amp;&amp; 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)//高亮显示当前tabthis.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(''&gt; .active'')//判断是使用回调还是动画var transition = callback      &amp;&amp; $.support.transition      &amp;&amp; ($active.length &amp;&amp; $active.hasClass(''fade'') || !!container.find(''&gt; .fade'').length)function next() {
      $active//去除其他元素的active样式.removeClass(''active'')//包括li元素里面的下拉菜单里的active样式也要去除.find(''&gt; .dropdown-menu &gt; .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 {//否则删除fadeelement.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 &amp;&amp; callback()
    }//如果支持动画$active.length &amp;&amp; transition ?  $active//在动画结束后执行next().one(''bsTransitionEnd'', next)
        .emulateTransitionEnd(Tab.TRANSITION_DURATION) :
      next()

    $active.removeClass(''in'')
  }
登录后复制

【4】jQuery插件定义

  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】防冲突处理

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

【6】绑定触发事件

  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)
登录后复制

 

　　

以上就是Bootstrap中的选项卡功能讲解的详细内容，更多请关注php中文网其它相关文章！

HarmonyOS NEXT 底部选项卡功能

HarmonyOS NEXT 底部选项卡功能

在HarmonyOS NEXT中使用ArkTS实现一个完整的底部选项卡功能，可以通过以下几个步骤来完成：

  1. 创建Tabs组件：使用Tabs组件来创建底部导航栏，并通过barPosition属性设置其位置为底部（BarPosition.End）。
  2. 添加TabContent子组件：在Tabs组件内部，为每个页面创建一个TabContent子组件，这些子组件将包含每个选项卡页面的内容。
  3. 配置TabBar：通过TabContent的tabBar属性来配置每个选项卡的标题和图标。可以使用自定义函数tabBuilder来构建每个选项卡的样式，包括图标和文本。
  4. 设置状态和控制器：使用@State装饰器来定义当前选中的选项卡索引，并使用TabsController来控制选项卡之间的切换。
  5. 自定义样式：可以通过barMode、scrollable等属性来自定义导航栏的样式和行为，例如设置为固定宽度或滚动显示。
  6. 事件处理：通过onChange事件来监听选项卡的切换，并更新当前状态。

以下是一个简单的代码示例，展示了如何使用ArkTS实现底部选项卡功能：

@Entry
@Component
struct BottomTabExample {
  controller: TabsController = new TabsController()
  @State current: number = 0

  tabBuilder($$: { index: number; label: string; normalIcon: Resource; selectIcon: Resource }) {
    Column() {
      Image(this.current === $$.index ? $$.selectIcon : $$.normalIcon).width(26)
      Text($$.label)
        .fontSize(''12fp'')
        .fontColor(this.current === $$.index ? ''#62C9D0'' : ''#909090'')
        .margin({ top: 3 })
    }
    .width(''100%'')
    .onClick(() => {
      this.current = $$.index
      this.controller.changeIndex(this.current)
    })
  }

  build() {
    Column() {
      Tabs({ barPosition: BarPosition.End, controller: this.controller }) {
        TabContent() {
          Text(''首页的内容'')
        }.tabBar(this.tabBuilder({
          index: 0,
          label: ''首页'',
          normalIcon: $r(''app.media.tabbar11''),
          selectIcon: $r(''app.media.tabbar12'')
        }))
        TabContent() {
          Text(''发现的内容'')
        }.tabBar(this.tabBuilder({
          index: 1,
          label: ''发现'',
          normalIcon: $r(''app.media.tabbar21''),
          selectIcon: $r(''app.media.tabbar22'')
        }))
        // ... 其他TabContent配置
      }
      .width(''100%'')
      .barMode(BarMode.Fixed)
      .scrollable(true)
      .onChange(((index: number) => {
        this.current = index
      }))
    }
    .width(''100%'')
    .backgroundColor(''#f2f2f2'')
  }
}

我们创建了一个底部选项卡，每个选项卡都有对应的内容和图标。当用户点击不同的选项卡时，tabBuilder函数会更新当前选中的选项卡索引，并且TabsController会处理页面的切换。通过onChange事件，我们可以监听选项卡的变化并执行相应的逻辑。学习鸿蒙 NEXT 开发，国产应用开发，全靠你我他，加油。

Ionic Js选项卡

Ionic Js选项卡

ionic tab(选项卡) 是水平排列的按钮或者链接，用以页面间导航的切换。它可以包含文字和图标的组合，是一种移动设备上流行的导航方法。

1.1.1 语法

<ion-tabs>

<ion-tab title="...">...</ion-tab>

<ion-tab title="...">...</ion-tab>

        ...

</ion-tabs>

注意：

• 不要把ion-tabs指令放在ion-content之内

• ion-tab的内容应当放入ion-view指令内，否则ionic在计算布局时可能出错

1.1.2 脚本接口：$ionicTabsDelegate

授权控制ionTabs指令。该方法直接调用$ionicTabsDelegate服务，控制所有ionTabs指令。用$getByHandle方法控制具体的ionTabs实例。

方法

select(index, [shouldChangeHistory])

· select(index) - 选中指定的选项页

index参数从0开始，第一个选项页的index为0，第二个为1，依次类推。

· selectedIndex() - 返回当前选中选项页的索引号

如果当前没有选中的选项页，则返回 -1。

 

 

关于js选项卡功能和js选项卡功能实现的问题我们已经讲解完毕，感谢您的阅读，如果还想了解更多关于01.关于easyui实现右键关闭tabs选项卡功能、Bootstrap中的选项卡功能讲解、HarmonyOS NEXT 底部选项卡功能、Ionic Js选项卡等相关内容，可以在本站寻找。

本文标签：

上一篇node.js (01http 模块 url 模块)（nodejs中http模块）

下一篇怎么动态生成js变量（怎么动态生成js变量数据）

相关文章