将上面的代码中tab换一种好看的样式nav nav-tabs,并默认选中并渲染第一个
时间: 2024-03-17 11:41:19 浏览: 52
可以通过修改 `ul` 元素的 class 为 `nav nav-tabs` 来改变样式,同时通过在第一个 `li` 元素的 `class` 属性中添加 `active` 来默认选中并渲染第一个标签页。代码如下:
```html
<!DOCTYPE html>
<html>
<head>
<title>Nav Tabs</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Nav Tabs</h2>
<ul class="nav nav-tabs">
<li class="nav-item active">
<a class="nav-link" data-toggle="tab" href="#tab1">Tab 1</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#tab2">Tab 2</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#tab3">Tab 3</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#tab4">Tab 4</a>
</li>
</ul>
<div class="tab-content">
<div id="tab1" class="tab-pane fade show active">
<h3>Tab 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt nisi ac tellus maximus dictum. Sed aliquam libero vel tellus tristique laoreet. Donec id enim ac arcu bibendum vestibulum. Proin nec purus quis elit interdum finibus sit amet vel ex. Nulla facilisi. Sed nec sapien euismod, aliquam ante eu, imperdiet ante. Donec varius commodo sapien, eget ornare justo varius ac. Fusce egestas, nunc et imperdiet sodales, libero ipsum congue arcu, eu lacinia nulla ex eu elit. Praesent id neque ut nulla sagittis malesuada.</p>
</div>
<div id="tab2" class="tab-pane fade">
<h3>Tab 2</h3>
<p>Quisque tincidunt nisi ac tellus maximus dictum. Sed aliquam libero vel tellus tristique laoreet. Donec id enim ac arcu bibendum vestibulum. Proin nec purus quis elit interdum finibus sit amet vel ex. Nulla facilisi. Sed nec sapien euismod, aliquam ante eu, imperdiet ante. Donec varius commodo sapien, eget ornare justo varius ac. Fusce egestas, nunc et imperdiet sodales, libero ipsum congue arcu, eu lacinia nulla ex eu elit. Praesent id neque ut nulla sagittis malesuada.</p>
</div>
<div id="tab3" class="tab-pane fade">
<h3>Tab 3</h3>
<p>Sed aliquam libero vel tellus tristique laoreet. Donec id enim ac arcu bibendum vestibulum. Proin nec purus quis elit interdum finibus sit amet vel ex. Nulla facilisi. Sed nec sapien euismod, aliquam ante eu, imperdiet ante. Donec varius commodo sapien, eget ornare justo varius ac. Fusce egestas, nunc et imperdiet sodales, libero ipsum congue arcu, eu lacinia nulla ex eu elit. Praesent id neque ut nulla sagittis malesuada.</p>
</div>
<div id="tab4" class="tab-pane fade">
<h3>Tab 4</h3>
<p>Donec varius commodo sapien, eget ornare justo varius ac. Fusce egestas, nunc et imperdiet sodales, libero ipsum congue arcu, eu lacinia nulla ex eu elit. Praesent id neque ut nulla sagittis malesuada.</p>
</div>
</div>
</div>
</body>
</html>
```
在这个示例中,`ul` 元素的 `class` 属性被修改为 `nav nav-tabs`,使标签页具有漂亮的样式。第一个 `li` 元素的 `class` 属性中添加了 `active`,以使第一个标签页默认选中并渲染。
阅读全文