Bootstrap标签页插件

Bertha 。 2022-08-23 09:55 177阅读 0赞

1.用法  
通过data属性，添加data-toggle=”tab”或data-toggle=”pill”到锚文本链接中

<ul class="nav nav-tabs">
       <li><a href="#identifier" data-toggle="tab">Home</a></li>
    ...
    </ul>

通过javascript启用

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

2.淡入淡出效果  
添加data-toggle:tab

<ul id="myTab" class="nav nav-tabs">
      <li class="active"> <a href="#home" data-toggle="tab"> home </a> </li>
      <li><a href="#html" data-toggle="tab">html</a></li>
      <li><a href="#css" data-toggle="tab">css</a></li>
      <li class="dropdown"> <a href="#" id="myTabDrop" class="dropdown-toggle" data-toggle="dropdown"> javascript<span class="caret"></span> </a>
        <ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop">
          <li><a href="#jquery" data-toggle="tab">jquery</a></li>
          <li><a href="#ajax" data-toggle="tab">ajax</a></li>
        </ul>
      </li>
    </ul>
    
    <div id="myTabContent" class="tab-content">
      <div class="tab-pane fade in active "id="home">
        <h1>home</h1>
        <p>home部分</p>
      </div>
      <div class="tab-pane fade in active "id="html">
        <h1>html</h1>
        <p>html部分</p>
      </div>
      <div class="tab-pane fade in active" id="css">
        <h1>css</h1>
        <p> css部分</p>
      </div>
      <div class="tab-pane fade in active" id="jquery">
        <h1>jquery</h1>
        <p>jquery部分</p>
      </div>
      <div class="tab-pane fade in active" id="ajax">
        <h1>ajax</h1>
        <p>ajax部分</p>
      </div>
    </div>

发表评论取消回复

表情：

评论列表（有 0 条评论，177人围观）

还没有评论，来说两句吧...

相关阅读

相关 bootstrap分页插件php,bootstrap-paginator分页插件实现分页的使用

![Ft9POsdcpvTbOLP6ICggh6zlEoUc][] 1.在页面引入bootstrap-paginator.js jquery必须要1.8版本以上。 2.写

骑猪看日落/ 2023年01月16日 06:51/ 0 赞/ 172 阅读

相关 Bootstrap教程(23)--标签页

[点此查看全部文字教程、视频教程、源代码][Link 1] 本文目录 1. 概述 2. 使用方法 3. 小结 1. 概述标签页使用频率

系统管理员/ 2022年11月06日 03:57/ 0 赞/ 168 阅读

相关 4.3Bootstrap学习js插件篇之标签页

简单的标签页代码： <h1 class="page-header">4.3标签页</h1> <ul class="nav nav-tabs">

谁借莪１个温暖的怀抱￠/ 2022年08月27日 03:58/ 0 赞/ 206 阅读

相关 Bootstrap标签页插件

1.用法通过data属性，添加data-toggle=”tab”或data-toggle=”pill”到锚文本链接中 <ul class="nav nav-ta

Bertha 。/ 2022年08月23日 09:55/ 0 赞/ 178 阅读

相关 Bootstrap分页插件--Bootstrap Paginator

1.在视图上引入bootstrap.css、bootstrap\-pageinator.js、jquery.min.js `<``link` `href``=``"css/b

向右看齐/ 2022年08月13日 11:57/ 0 赞/ 342 阅读

相关 Bootstrap标签页和工具提示插件

标签页插件 > 标签页就是通常所说的选项卡功能 //也可以换成胶囊式 //<ul class="nav nav-pills"> <ul id="

雨点打透心脏的1/2处/ 2022年06月12日 06:21/ 0 赞/ 180 阅读

相关 Bootstrap Paginator 分页插件

一、插件简介 Bootstrap Paginator是一款基于Bootstrap和jQuery的分页组件。 github地址为: [ https://g

深碍√TFBOYSˉ_/ 2022年06月04日 04:24/ 0 赞/ 346 阅读

相关 bootstrap标签页（tab）

Bootstrap 标签页（Tab）插件标签页（Tab）在 [Bootstrap 导航元素][Bootstrap] 一章中介绍过。通过结合一些 data 属性，您可以轻

r囧r小猫/ 2022年05月31日 04:23/ 0 赞/ 307 阅读

相关 bootstrap插件

（1）bootstrap-treeview：[https://github.com/jonmiles/bootstrap-treeview][https_github.com_

青旅半醒/ 2022年03月18日 03:24/ 0 赞/ 389 阅读

相关 bootstrap 标签页 demo

引入文件 jquery-3.2.1.min.js bootstrap.css bootstrap.js 基本代码 <ul class="nav n

青旅半醒/ 2021年09月28日 04:42/ 0 赞/ 657 阅读