我已尝试更改活动标签，但未能正确使用javascript onclick元素。这是代码：
<ul class="nav nav-tabs" style="text-align: left;">
<li class="active"><a href="#first" data-toggle="tab">First</a></li>
<li><a href="#second" data-toggle="tab">Second</a></li>
<li><a href="#third" data-toggle="tab">Third</a></li>
</ul>
<div class=“tab-content">
<div id="first" class="tab-pane fade in active”>
Text
<a href="#second" class="btn btn-primary btn-lg" onclick=“CHANGE ACTIVE TAB TO SECOND” data-toggle="tab">Second</a>
<a href="#third" class="btn btn-primary btn-lg" onclick=“CHANGE ACTIVE TAB TO THIRD” data-toggle=“tab">Third</a>
</div>
<div id="second" class="tab-pane fade in”>
Text
</div>
<div id="third" class="tab-pane fade in”>
Text
</div>
</div>
我如何使用按钮将活动标签更改为其关联的ID？请指教。
祝您有美好的一天！
您可以在单击按钮时触发想要的选项卡的单击
<ul class="nav nav-tabs" style="text-align: left;">
<li class="active"><a href="#first" data-toggle="tab" id="first_tab">First</a></li>
<li><a href="#second" data-toggle="tab" id="second_tab">Second</a></li>
<li><a href="#third" data-toggle="tab" id="third_tab">Third</a></li>
</ul>
<div class="tab-content">
<div id="first" class="tab-pane fade in active">
Text
<a class="btn btn-primary btn-lg" onclick="$('#second_tab').trigger('click')">Second</a>
<a class="btn btn-primary btn-lg" onclick="$('#third_tab').trigger('click')">Third</a>
</div>
....
</div>
这里是Demo
您也可以使用.tab('show')获得更大的灵活性
https://codepen.io/jacobgoh101/pen/ALELNr
<button class="btn btn-primary" onclick="menu3()">go to menu 3</button>
javascript：
function menu3(){
$('[href="#menu3"]').tab('show');
}
Bootstrap文档：https://getbootstrap.com/javascript/#tabs
我推荐数据属性方法，这是一种干净的解决方案，并且视图与控制器代码分开
<a href="#btn-next"data-next="#tab1" class="btn btn-primary">go to menu 1</a>
<a href="#btn-next"data-next="#tab2" class="btn btn-primary">go to menu 2</a>
javascript：
$('a[href="#btn-next"]').on('click', function(event){
event.preventDefault();
var tab = $(this).data('next');
$(tab).tab('show');
})
这是您的js
$('#submit').click(function (e) {
$('#myTab a[href=#tabs3-2k_tab2]').tab('show')
e.preventDefault()
});
[我需要一个解决方案，它是根据（从下一个按钮选择的）类别显示页面的页面
<div class="breadcrumb-section">
<!-- breadcrumb -->
<ol class="breadcrumb">
<li><a href="index.html">Home</a></li>
<li>Ad Post</li>
</ol><!-- breadcrumb -->
<h2 class="title">Post Free Ad</h2>
</div><!-- banner -->
<div id="ad-post">
<div class="row category-tab">
<div class="col-lg-4 col-md-6">
<div class="section cat-option select-category post-option">
<h4>Select a subcategory</h4>
<ul role="tablist" class="nav nav-tabs">
<li><a href="#cat1" aria-controls="cat1" role="tab" data-toggle="tab">
<span class="select">
<img src="images/icon/1.png" alt="Images" class="img-">
</span>
Cars & Vehicles
</a></li>
<li class="active link-active"><a href="#cat2" aria-controls="cat2" role="tab" data-toggle="tab">
<span class="select">
<img src="images/icon/2.png" alt="Images" class="img-fluid">
</span>
Electronics & Gedgets
</a></li>
<li><a href="#cat3" aria-controls="cat3" role="tab" data-toggle="tab">
<span class="select">
<img src="images/icon/3.png" alt="Images" class="img-fluid">
</span>
Real Estate
</a></li>
<li><a href="#cat4" aria-controls="cat4" role="tab" data-toggle="tab">
<span class="select">
<img src="images/icon/4.png" alt="Images" class="img-fluid">
</span>
Sports & responsive
</a></li>
<li><a href="#cat5" aria-controls="cat5" role="tab" data-toggle="tab">
<span class="select">
<img src="images/icon/5.png" alt="Images" class="img-fluid">
</span>
Fshion & Beauty
</a></li>
<li><a href="#cat6" aria-controls="cat6" role="tab" data-toggle="tab">
<span class="select">
<img src="images/icon/6.png" alt="Images" class="img-fluid">
</span>
Pets & Animals
</a></li>
<li><a href="#cat7" aria-controls="cat7" role="tab" data-toggle="tab">
<span class="select">
<img src="images/icon/7.png" alt="Images" class="img-fluid">
</span>
Job Openings
</a></li>
<li><a href="#cat8" aria-controls="cat8" role="tab" data-toggle="tab">
<span class="select">
<img src="images/icon/9.png" alt="Images" class="img-fluid">
</span>
Home Appliances
</a></li>
<li><a href="#cat9" aria-controls="cat9" role="tab" data-toggle="tab">
<span class="select">
<img src="images/icon/10.png" alt="Images" class="img-fluid">
</span>
Matrimony Services
</a></li>
<li><a href="#cat10" aria-controls="home10" role="tab" data-toggle="tab">
<span class="select">
<img src="images/icon/11.png" alt="Images" class="img-fluid">
</span>
Books & Magazines
</a></li>
</ul>
</div>
</div>
<!-- Tab panes -->
<div class="col-lg-4 col-md-6">
<div class="section tab-content subcategory post-option">
<h4>Select a subcategory</h4>
<div role="tabpanel" class="tab-pane" id="cat1">
<ul>
<li><a href="javascript:void(0)">Cars & Buses</a></li>
<li><a href="javascript:void(0)">Motorbikes & Scooters</a></li>
<li><a href="javascript:void(0)">Bicycles and Three Wheelers</a></li>
<li><a href="javascript:void(0)">Three Wheelers</a></li>
<li><a href="javascript:void(0)">Trucks, Vans & Buses</a></li>
<li><a href="javascript:void(0)">Tractors & Heavy-Duty</a></li>
<li><a href="javascript:void(0)">Auto Parts & Accessories</a></li>
</ul>
</div>
<div role="tabpanel" class="tab-pane active show" id="cat2">
<ul>
<li><a href="javascript:void(0)">Laptop & Computer</a></li>
<li><a href="javascript:void(0)">Mobile Phones</a></li>
<li><a href="javascript:void(0)">Phablet & Tablets</a></li>
<li><a href="javascript:void(0)">Audio & MP</a></li>
<li><a href="javascript:void(0)">Accessories</a></li>
<li><a href="javascript:void(0)">Cameras</a></li>
<li><a href="javascript:void(0)">Mobile Accessories</a></li>
<li><a href="javascript:void(0)">TV & Video</a></li>
<li><a href="javascript:void(0)">Other Electronics</a></li>
<li><a href="javascript:void(0)">TV & Video Accessories</a></li>
</ul>
</div>
<div role="tabpanel" class="tab-pane" id="cat3">
<ul>
<li><a href="javascript:void(0)">Houses & Plots</a></li>
<li><a href="javascript:void(0)">Lands & property</a></li>
<li><a href="javascript:void(0)">Plots & Lands</a></li>
<li><a href="javascript:void(0)">Apartment</a></li>
</ul>
</div>
<div role="tabpanel" class="tab-pane" id="cat4">
<ul>
<li><a href="javascript:void(0)">Sub Category Item</a></li>
<li><a href="javascript:void(0)">Sub Category Item</a></li>
<li><a href="javascript:void(0)">Sub Category Item</a></li>
<li><a href="javascript:void(0)">Sub Category Item</a></li>
</ul>
</div>
<div role="tabpanel" class="tab-pane" id="cat5">
<ul>
<li><a href="javascript:void(0)">Sub Category Item</a></li>
<li><a href="javascript:void(0)">Sub Category Item</a></li>
<li><a href="javascript:void(0)">Sub Category Item</a></li>
</ul>
</div>
<div role="tabpanel" class="tab-pane" id="cat6">
<ul>
<li><a href="javascript:void(0)">Sub Category Item</a></li>
<li><a href="javascript:void(0)">Sub Category Item</a></li>
<li><a href="javascript:void(0)">Sub Category Item</a></li>
<li><a href="javascript:void(0)">Sub Category Item</a></li>
<li><a href="javascript:void(0)">Sub Category Item</a></li>
</ul>
</div>
<div role="tabpanel" class="tab-pane" id="cat7">
<ul>
<li><a href="javascript:void(0)">Sub Category Item</a></li>
<li><a href="javascript:void(0)">Sub Category Item</a></li>
<li><a href="javascript:void(0)">Sub Category Item</a></li>
<li><a href="javascript:void(0)">Sub Category Item</a></li>
<li><a href="javascript:void(0)">Sub Category Item</a></li>
<li><a href="javascript:void(0)">Sub Category Item</a></li>
<li><a href="javascript:void(0)">Sub Category Item</a></li>
<li><a href="javascript:void(0)">Sub Category Item</a></li>
</ul>
</div>
<div role="tabpanel" class="tab-pane" id="cat8">
<ul>
<li><a href="javascript:void(0)">Sub Category Item</a></li>
<li><a href="javascript:void(0)">Sub Category Item</a></li>
<li><a href="javascript:void(0)">Sub Category Item</a></li>
<li><a href="javascript:void(0)">Sub Category Item</a></li>
<li><a href="javascript:void(0)">Sub Category Item</a></li>
<li><a href="javascript:void(0)">Sub Category Item</a></li>
<li><a href="javascript:void(0)">Sub Category Item</a></li>
<li><a href="javascript:void(0)">Sub Category Item</a></li>
<li><a href="javascript:void(0)">Sub Category Item</a></li>
<li><a href="javascript:void(0)">Sub Category Item</a></li>
<li><a href="javascript:void(0)">Sub Category Item</a></li>
<li><a href="javascript:void(0)">Sub Category Item</a></li>
<li><a href="javascript:void(0)">Sub Category Item</a></li>
</ul>
</div>
<div role="tabpanel" class="tab-pane" id="cat9">
<ul>
<li><a href="javascript:void(0)">Sub Category Item</a></li>
<li><a href="javascript:void(0)">Sub Category Item</a></li>
<li><a href="javascript:void(0)">Sub Category Item</a></li>
</ul>
</div>
<div role="tabpanel" class="tab-pane" id="cat10">
<ul>
<li><a href="javascript:void(0)">Sub Category Item</a></li>
<li><a href="javascript:void(0)">Sub Category Item</a></li>
<li><a href="javascript:void(0)">Sub Category Item</a></li>
<li><a href="javascript:void(0)">Sub Category Item</a></li>
<li><a href="javascript:void(0)">Sub Category Item</a></li>
</ul>
</div>
<div role="tabpanel" class="tab-pane" id="cat11">
<ul>
<li><a href="javascript:void(0)">Sub Category Item</a></li>
</ul>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="section next-stap post-option">
<h2>Post an Ad in just <span>30 seconds</span></h2>
<p>Please DO NOT post multiple ads for the same items or service. All duplicate, spam and wrongly categorized ads will be deleted.</p>
<div id="my-buttons">
<button class="select-tab">Next</button>
<button class="select-tab">Previous</button>
</div>
</div>
</div
我推荐此代码。
<div class="tab-control" data-role="tab-control">
<ul>
<li><a href="#tab1">Tab 1</a></li>
<li><a href="#tab2">Tab 2</a></li>
</ul>
<div class="frames">
<div class="frame" id="tab1">
//Content tab 1
</div>
<div class="frame" id="tab2">
//Content tab 2
</div>
</div>
</div>
在类属性中添加所需的效果。