Bootstrap基础--选项卡

Bootstrap基础–选项卡(nav-tabs)

选项卡Tabs是Web中一种非常常用的功能。用户点击或悬浮对应的菜单项,能切换出对应的内容。

一个选项卡主要包括两个部分,其一是菜单项,其二是内容面板。

注意: 选项卡中链接的锚点要与对应的面板内容容器的?相匹配。

触发切换效果

  1. 选项卡导航链接中要设置data-toggle=“tab”;
  2. 并且设置data-target=“对应内容面板的选择符(一般是?)”;
    如果是链接 的话,还可以通过href=“对应内容面板的选择符(一般是?)”。主要起的作用是用户点击的时候能找到该选择符所对应的面板内容tab-pane
  3. 面板内容统一放在ta-content容器中,而且每个内容面板tab-pane都需要设置一个独立的选择符(最好是ID)与选项卡中的data-target 或 href 的值匹配。

添加fade样式

在面板中添加类名fade,可让其产生渐入的效果。在添加fade样式时,最初的默认显示的内容面板一定要记得加上in类名,不然其内容用户无法看到。

胶囊式选项卡(nav-pill)

  1. 将nav-tabs换成nav-pills.
  2. 将data-toggle="tab"换成data-toggle=“pill”

<html>
	<head>
		<meta charset="utf-8">
		<title>title>
		<script src="JSmin/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8">script>
		<script src="JSmin/bootstrap.min.js" type="text/javascript" charset="utf-8">script>
		<link rel="stylesheet" type="text/css" href="CSS/bootstrap.min.css" />
	head>
	<body>
		<h1>选项卡h1>
		<ul class="nav nav-tabs">
			<li class="active"><a href="#bulletin" data-toggle="tab">公告a>li>
			<li><a href="#rule" data-toggle="tab">规则a>li>
			<li><a href="#forum" data-toggle="tab">论坛a>li>
			<li><a href="#security" data-toggle="tab">安全a>li>
			<li><a href="#welfare" data-toggle="tab">公益a>li>
		ul>
		<div id="mytab-content" 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>

		<h3>js触发选项卡h3>
		<ul class="nav nav-tabs" id="myTab">
			<li class="active"><a href="#bulletin1">公告a>li>
			<li><a href="#rule1">规则a>li>
			<li><a href="#forum1">论坛a>li>
			<li><a href="#security1">安全a>li>
			<li><a href="#welfare1">公益a>li>
		ul>
		<div id="mytab-content2" class="tab-content">
			<div class="tab-pane fade in active" id="bulletin1">公告内容面板div>
			<div class="tab-pane fade" id="rule1">规则内容面板div>
			<div class="tab-pane fade" id="forum1">论坛内容面板div>
			<div class="tab-pane fade" id="security1">安全内容面板div>
			<div class="tab-pane fade" id="welfare1">公益内容面板div>
		div>
		<script type="text/javascript">
			$(function(){
				$('#myTab a').click(function(){
					$(this).tab('show')
				})
			})
		script>		
	body>
html>

Bootstrap基础--选项卡_第1张图片

你可能感兴趣的:(html,选项卡,nav-tabs,Bootstrap)