页头引入：
xxxxxxxxxx11<head>2<meta charset="UTF-8">3<title>CodePen - Responsive Tabs (v1.1)</title>4<link href="https://fonts.googleapis.com/css?family=Overpass+Mono|Overpass:400,400i,600,600i,700,700i,800,800i|Zilla+Slab:400,400i,500,500i,600,600i,700,700i" rel="stylesheet"><link rel='stylesheet' href='https://s3-us-west-2.amazonaws.com/s.cdpn.io/165965/tyfy.css'>5<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'><link rel="stylesheet" href="./style.css">67</head>
页脚加上：
页中：
x141<section class="demo">2<div class="tabs-container">3<h2 class="tab-label">Lorem Ipsum</h2>4<p>Porro excepturi ad eligendi excepturi quam voluptate velit. Placeat modi animi natus est temporibus tenetur pariatur suscipit. Dolores sit id sit placeat consequatur temporibus accusamus et. Cumque voluptatum voluptatum delectus et sequi. Vero vitae officia eius ad. Consequatur impedit quam mollitia.</p>5<p>Aspernatur id nihil sit eveniet vero corporis necessitatibus sit. Magni quia vitae perferendis. Suscipit illo tempora minus officia nemo aut numquam. Qui et omnis velit repudiandae autem. Aperiam aut dolorem neque quis dolor est sunt.</p>6<h2 class="tab-label collapsed">Dolor Sit Amet</h2>7<p>Facilis error corrupti dolor eaque. <a id="anchor">Occaecati</a> illum sequi officia rerum nostrum. Iste in quo eveniet. Deserunt quaerat a adipisci magni consequatur nesciunt distinctio praesentium. Ipsum vel ut est vel veritatis fugiat perspiciatis.</p>8<p>Omnis dolores sit pariatur facilis odit magni. Totam excepturi incidunt dolorem assumenda neque dolorem. Dolorem odio consequatur quas corrupti sequi. Nihil ut nihil itaque non at molestiae corporis. Explicabo voluptate quis et.</p>9<h2 class="tab-label collapsed">Donec Scelerisque</h2>10<p>Curabitur non mauris sodales, tempor lacus ac, maximus felis. Vestibulum ultrices augue ut arcu mattis pellentesque. Maecenas ullamcorper lorem sit amet pretium pharetra. Nunc ipsum tellus, hendrerit vitae bibendum vel, scelerisque sit amet libero. Duis imperdiet massa placerat venenatis pharetra. Donec consectetur quis odio sit amet sollicitudin. Morbi at faucibus odio. Duis viverra lacus a odio pretium, quis suscipit tortor accumsan. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur egestas venenatis est vel hendrerit. Fusce molestie bibendum ex in suscipit.</p>11</div>12<h2>Notes</h2>13<p>I've relied on CSS Flexbox for the visual tabs. Flexbox is <a href="https://caniuse.com/#search=flex">a problem for just about any version of Internet <strike>Exploder</strike> Explorer</a>. At some point, I'll need to figure out an alternative way to present the tabs that will work for IE.</p>14</section>