BootStrap之标签页切换

标签页切换

  • 标签页切换
  • 标签页插件
    • 第一个官方例子
    • 调用tab("show")显示tab-pane中的内容
    • 第一个例子的HTML+CSS代码
    • fade in效果
  • 函数介绍
    • 前提条件:data-target/href数据指向设置
    • tab("show")函数-显示内容
    • 查看事件响应的新旧对象

标签页切换

    标签页切换,就是通过点击菜单/选项卡中的文字标签,使其达到局部内容更换的效果。以下给出标签页切换的最简化代码实现。

DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>title>
		
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-p1KAotb3W9ndluCsqePPYnjRm3c6abdnIjo0tQwYUv83VsbsYd43RuofnFAaDo0E" crossorigin="anonymous">
	head>
	<body>
		
		
		<ul id="menu" class="nav">
			<li class="">
				
				<a href="#userinfo" data-toggle="tab">个人信息a>
			li>
			<li><a href="#query" data-toggle="tab">成果查询a>li>
		ul>
		
		
		
		
		<div class="tab-content">
			
			<div class="tab-pane" id="userinfo">
				个人信息内容
			div>
			<div class="tab-pane" id="query">
				成果查询内容
			div>
		div>
		

		
		<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous">script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-E5Sj1saJVFNzWWK3YIJB4LEDEEVEGaOdfmCprPDkfWUo+xkb6Ep52Q1TMEtgcFwi" crossorigin="anonymous">script>
		<script>
			$(function() {
				//jquery代码——控制页面初始自动显示id名称为menu的第一个li子标签
				$('#menu li:eq(0) a').tab('show');
			});
		script>
	body>
html>

效果如下,

在这里插入图片描述

标签页插件

    Bootstrap的标签插件可见参考文档。

第一个官方例子

下面来结合官网的解释看一下上述例子中的js代码中调用的函数的作用。下面是官网给出的第一个例子,
BootStrap之标签页切换_第1张图片

调用tab(“show”)显示tab-pane中的内容

然后给出了调用tab(“show”)函数来显示第n个标签对应的tab-pane中承载的内容。
BootStrap之标签页切换_第2张图片

第一个例子的HTML+CSS代码

而想要显示tab-pane中显示的内容,无需写JS代码,只需要通过添加data-toggle="tab"或者data-toggle="pill"属性值来绑定a标签和tab-pane对应的内容即可。

<div>

  
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Homea>li>
    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profilea>li>
    <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messagesa>li>
    <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settingsa>li>
  ul>

  
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="home">...div>
    <div role="tabpanel" class="tab-pane" id="profile">...div>
    <div role="tabpanel" class="tab-pane" id="messages">...div>
    <div role="tabpanel" class="tab-pane" id="settings">...div>
  div>

div>

fade in效果

fade in效果,简单来说,就是通过添加fade或者tab-pane类选择器,结合上面的data-toggle来达到内容显示效果。同时,也可配合-例如“in active”选择器,来指定初始化时,默认选择要显示的tab-pane中的内容。

<div class="tab-content">
  <div role="tabpanel" class="tab-pane fade in active" id="home">...div>
  <div role="tabpanel" class="tab-pane fade" id="profile">...div>
  <div role="tabpanel" class="tab-pane fade" id="messages">...div>
  <div role="tabpanel" class="tab-pane fade" id="settings">...div>
div>

函数介绍

前提条件:data-target/href数据指向设置

值得一提的是,通常我们也会见到data-target的写法,用于绑定tab选项标签和与之对应的tab-pane内容,其实这种指向方式是可以替换上面的href指向方式的。

在这里插入图片描述

tab(“show”)函数-显示内容

只要有一个tab选项标签被预先选中,任何其它未处于选中状态的tab标签及与之关联的内容都会处于隐藏状态。

BootStrap之标签页切换_第3张图片

查看事件响应的新旧对象

当调用tab函数,切换显示的页面内容时,具体的事件响应顺序如下(就不做具体翻译了,有兴趣的可以看一下)。同时,Bootstrap也提供了可以获取新旧事件对象的jquery对象。
BootStrap之标签页切换_第4张图片

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})

你可能感兴趣的:(Vue,bootstrap,jquery,标签页切换)