標籤式導航

時間  2019-12-06
標籤 標籤 導航 简体版
原文   原文鏈接

1.標籤式導航css

在<ul>無序列表中添加 .nav nav-tabs  第一個<li>默認是選中狀態html

<ul class="nav nav-tabs">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">house1</a></li>
    <li><a href="#">house2</a></li>
</ul>jquery

2.設置標籤頁對應的內容隨標籤的切換而更改bootstrap

1.在<li>中加入  data-toggle="tab"      href="#home"   href中存放對應tab的IDspa

2.下面插入一個帶有 .tab-contant的 div htm

3.ip

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Bootstrap 實例 - 標籤頁與膠囊式標籤頁</title>
    <link href="css/bootstrap.min.css" rel="stylesheet" />
        <script src="js/jquery-3.1.1.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
</head>
<body>
<ul class="nav nav-tabs">
    <li class="active"><a data-toggle="tab" href="#home">Home</a></li>
    <li><a data-toggle="tab" href="#house1">house1</a></li>
    <li><a data-toggle="tab" href="#house2">house2</a></li>
</ul>utf-8

<div class="tab-content">
    <div id="home" class="tab-pane fade in active">
        <h3>home頁</h3>
    </div>
    <div id="house1" class="tab-pane fade ">
        <h3>house1頁</h3>
    </div>
    <div id="house2" class="tab-pane fade ">
        <h3>house2頁</h3>
    </div>
</div>it

<ul class="nav nav-tabs">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">house1</a></li>
    <li><a href="#">house2</a></li>
</ul>
</body>
</html>class

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程