您好我正在使用bootstrap4。在这里，我试图在bootstrap'navbar'上获得引导程序'标签'的行为。但标签行为不适用于'navbar'。我花了很多时间来实现这一目标，但我不能。我怎样才能实现这一目标？请帮我。提前致谢。 注意：请在桌面视图中查看小提琴以了解我的需求。
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Link1</a>
</li>
<li class="nav-item">
<a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Link2</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">Excepteur incididunt aute veniam veniam aliquip voluptate anim duis proident eu fugiat cillum in exercitation anim exercitation id eu incididunt laboris dolore est veniam eiusmod officia eu anim laborum dolor dolore magna ea commodo excepteur sit
enim nisi ex ullamco culpa sed irure proident irure reprehenderit aute exercitation dolor mollit id tempor ea excepteur aliqua consequat eu ut qui sed aliquip incididunt ex ut sunt nisi sed ut excepteur sed dolore sunt ut elit est ad amet id qui
mollit ex dolor aute magna magna ea enim mollit voluptate sint cillum nisi tempor ut consequat sint eiusmod non consectetur labore cupidatat reprehenderit veniam do voluptate excepteur eu deserunt qui est do labore veniam ullamco eiusmod nulla aliqua
proident occaecat ut eu ut anim elit magna eu ullamco id ut eu irure in tempor commodo occaecat consectetur eu excepteur aute pariatur in elit consequat duis ea occaecat dolore magna eiusmod tempor mollit deserunt veniam quis enim veniam labore
dolor ad occaecat nostrud aliquip dolor consequat adipisicing aliquip cillum eiusmod dolor dolor nulla nulla adipisicing excepteur sit mollit incididunt est nisi ullamco ad excepteur veniam pariatur dolor nisi velit ex in aliquip consectetur labore
</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">Lorem ipsum quis sit laborum sed incididunt irure dolore ex consequat exercitation labore laboris occaecat in duis aute nisi qui nisi cupidatat enim ut minim in nulla mollit ut quis nostrud consectetur enim dolore deserunt non elit fugiat.</div>
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">In ad dolor nostrud consectetur sunt irure est commodo magna proident et ex enim esse nulla mollit reprehenderit pariatur amet est minim ut occaecat dolor minim ut in aliquip. Mollit excepteur esse dolore nisi commodo ex officia officia et ad excepteur
sunt sint amet dolore eu nostrud quis consectetur consequat aliqua cupidatat tempor veniam.</div>
</div>
<nav>
<div class="nav nav-tabs mt-4" id="nav-tab" role="tablist">
<a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a>
<a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a>
<a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a>
</div>
</nav>
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">Home</div>
<div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">link1</div>
<div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">link2</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
答案 0 :(得分：0)
在您的顶部或主要ul navbar中，使用指向标签链接
href进行更改
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" id="home-tab" data-toggle="tab" href="#nav-home-tab" role="tab" aria-controls="home" aria-selected="true">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#nav-profile-tab" role="tab" aria-controls="profile" aria-selected="false">Link1</a>
</li>
<li class="nav-item">
<a class="nav-link" id="contact-tab" data-toggle="tab" href="#nav-contact-tab" role="tab" aria-controls="contact" aria-selected="false">Link2</a>
</li>
</ul>
然后添加此javascript
$(".navbar .nav-link[data-toggle='tab']").on("click", function(event){
event.stopPropagation();
var targetTab = $(this).attr("href");
$(targetTab).tab("show")
});
答案 1 :(得分：0)
标签组件是从nav（而非navbar-nav）触发的，因此只需将nav课程添加到navbar-nav ...
<ul class="navbar-nav nav mr-auto">..<ul>
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<nav class="navbar navbar-expand navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav nav mr-auto">
<li class="nav-item active">
<a class="nav-link" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Link1</a>
</li>
<li class="nav-item">
<a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Link2</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">Excepteur incididunt aute veniam veniam aliquip voluptate anim duis proident eu fugiat cillum in exercitation anim exercitation id eu incididunt laboris dolore est veniam eiusmod officia eu anim laborum dolor dolore magna ea commodo excepteur sit
enim nisi ex ullamco culpa sed irure proident irure reprehenderit aute exercitation dolor mollit id tempor ea excepteur aliqua consequat eu ut qui sed aliquip incididunt ex ut sunt nisi sed ut excepteur sed dolore sunt ut elit est ad amet id qui
mollit ex dolor aute magna magna ea enim mollit voluptate sint cillum nisi tempor ut consequat sint eiusmod non consectetur labore cupidatat reprehenderit veniam do voluptate excepteur eu deserunt qui est do labore veniam ullamco eiusmod nulla aliqua
proident occaecat ut eu ut anim elit magna eu ullamco id ut eu irure in tempor commodo occaecat consectetur eu excepteur aute pariatur in elit consequat duis ea occaecat dolore magna eiusmod tempor mollit deserunt veniam quis enim veniam labore
dolor ad occaecat nostrud aliquip dolor consequat adipisicing aliquip cillum eiusmod dolor dolor nulla nulla adipisicing excepteur sit mollit incididunt est nisi ullamco ad excepteur veniam pariatur dolor nisi velit ex in aliquip consectetur labore
</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">Lorem ipsum quis sit laborum sed incididunt irure dolore ex consequat exercitation labore laboris occaecat in duis aute nisi qui nisi cupidatat enim ut minim in nulla mollit ut quis nostrud consectetur enim dolore deserunt non elit fugiat.</div>
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">In ad dolor nostrud consectetur sunt irure est commodo magna proident et ex enim esse nulla mollit reprehenderit pariatur amet est minim ut occaecat dolor minim ut in aliquip. Mollit excepteur esse dolore nisi commodo ex officia officia et ad excepteur
sunt sint amet dolore eu nostrud quis consectetur consequat aliqua cupidatat tempor veniam.</div>
</div>
<nav>
<div class="nav nav-tabs mt-4" id="nav-tab" role="tablist">
<a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a>
<a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a>
<a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a>
</div>
</nav>
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">Home</div>
<div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">link1</div>
<div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">link2</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>