如何创建没有锚(href)标签的引导4选项卡?我试过使用data-target，但没有运气。
<ul class="nav nav-tabs" id="createNewTemplate" role="tablist">
<li class="nav-item">
<a class="nav-link" id="available-tab" data-toggle="tab" href="#available" role="tab" aria-controls="available" aria-selected="true">Available</a>
</li>
<li class="nav-item">
<a class="nav-link active" id="new-tab" data-toggle="tab" href="#new" role="tab" aria-controls="new" aria-selected="false">New</a>
</li>
</ul>
<div class="tab-content" id="newTemplateContent">
<div class="tab-pane fade" id="available" role="tabpanel" aria-labelledby="available-tab">Available content...</div>
<div class="tab-pane fade show active" id="new" role="tabpanel" aria-labelledby="new-tab">
New content...
</div>
</div>
正常情况下应该与
data-target一起工作。您可以查看示例2。
你只能给href属性"#";和元素ID为"data-target"。
body {
padding: 50px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<body>
<ul class="nav nav-tabs" id="createNewTemplate" role="tablist">
<li class="nav-item">
<a class="nav-link" id="available-tab" data-toggle="tab" href="#" data-target="#available" role="tab" aria-controls="available" aria-selected="true">Available</a>
</li>
<li class="nav-item">
<a class="nav-link active" id="new-tab" data-toggle="tab" href="#" data-target="#new" role="tab" aria-controls="new" aria-selected="false">New</a>
</li>
</ul>
<div class="tab-content" id="newTemplateContent">
<div class="tab-pane fade" id="available" role="tabpanel" aria-labelledby="available-tab">Available content...</div>
<div class="tab-pane fade show active" id="new" role="tabpanel" aria-labelledby="new-tab">
New content...
</div>
</div>
</body>
不包含<a>元素。
body {
padding: 50px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<body>
<ul class="nav nav-tabs" id="createNewTemplate" role="tablist">
<li class="nav-item">
<div class="nav-link cursor-pointer" id="available-tab" data-toggle="tab" data-target="#available" role="tab" aria-controls="available" aria-selected="true">Available</div>
</li>
<li class="nav-item">
<div class="nav-link cursor-pointer active" id="new-tab" data-toggle="tab" data-target="#new" role="tab" aria-controls="new" aria-selected="false">New</div>
</li>
</ul>
<div class="tab-content" id="newTemplateContent">
<div class="tab-pane fade" id="available" role="tabpanel" aria-labelledby="available-tab">Available content...</div>
<div class="tab-pane fade show active" id="new" role="tabpanel" aria-labelledby="new-tab">
New content...
</div>
</div>
</body>