html碎片

1.bootstrap实现tab切换：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>tab切换</title>
 8     <link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
 9     <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
10     <script src="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
11 </head>
12 <body>
13     <div>
14 
15         <!-- 导航 -->
16         <ul class="nav nav-tabs" role="tablist">
17           <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
18           <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
19           <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
20           <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
21         </ul>
22       
23 
24         <!-- 带显示效果的内容 -->
25         <div class="tab-content">
26             <div role="tabpanel" class="tab-pane fade in active" id="home">1</div>
27             <div role="tabpanel" class="tab-pane fade" id="profile">2</div>
28             <div role="tabpanel" class="tab-pane fade" id="messages">3</div>
29             <div role="tabpanel" class="tab-pane fade" id="settings">4</div>
30         </div>
31     </div>
32 </body>
33 </html>

 

posted @ 2021-05-30 17:05  千叶千影  阅读(74)  评论(0)    收藏  举报