我正在尝试模仿单击 HTML 页面上的链接的过程。我在选择器上使用 jQuery .click() 函数。该链接是 Bootstrap nav-pills 基于选项卡的表单的一部分。当我单击 nav-pills 链接时，它工作得很好 - 表单上的选项卡显示并显示该选项卡上的所有字段。当我运行下面的代码时 - .click() 函数 - 它会显示该选项卡，但在我手动单击该 nav-pills 之前，选项卡上不会显示任何字段> 链接。
这是代码:
$("#tabDocumentsTab").click();
这是我想要运行的函数/选择器代码:
$("#tabDocumentsTab").click(function (e) {
console.log("tabDocumentsTab START");
// Display Provider files...
displayProviderFileUploads();
// Display Adult PTP files...
displayAdultPTPFileUploads();
// Display Other files...
displayOtherFileUploads();
// Set the Page color To Non-State...
changePageColorToNonState();
// Set the current tab number...
setCurrentPage(1);
var linkText = $(this).text();
var index = $(this).index();
// If State Use Only tab - add text...
if (index > 6 && index < 10) {
linkText = linkText + " (State Use Only)";
}
// Now set the h3 value...
$("#mainTitleH3").text(linkText);
e.preventDefault();
// Show current link section, hide all the rest...
for (x = 0; x < totalSections; x++) {
if (x == index) {
// Show the current section...
$("#displaySection" + x).show();
} else {
// Hide the rest...
$("#displaySection" + x).hide();
}
}
console.log("tabDocumentsTab END");
});
这是 Bootstrap nav-pills HTML:
<!-- This is the NAVGIVATION section -->
<div class="col-sm-2">
<ul class="nav nav-pills nav-stacked" id="mainNavList">
...
<li>
<a id="tabDocumentsTab" data-toggle="pill" href="#displaySection1">Documents</a>
</li>
...
</ul>
</div>
<!-- End of NAVGIVATION section -->
我发现一些帖子没有给我我需要的结果:
How to open specific tab of bootstrap nav tabs on click of a particuler link using jQuery?
最佳答案
要在 Bootstrap 中显示选项卡，您需要使用 $(selector).tab('show')。请参阅documentation .
$("#tabDocumentsTab").tab('show');
$('#menu1').tab('show');//show second tab (Menu 1)<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h2>Toggleable Tabs</h2>
<br>
<!-- Nav tabs -->
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#menu1" id="menu1">Menu 1</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#menu2">Menu 2</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div id="home" class="container tab-pane active"><br>
<h3>HOME</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div id="menu1" class="container tab-pane fade"><br>
<h3>Menu 1</h3>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div id="menu2" class="container tab-pane fade"><br>
<h3>Menu 2</h3>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
</div>
</div>
</div>
</body>
</html>关于javascript - jquery .click() 并不完成与实际单击链接相同的过程；需要单击实际链接才能使流程正常运行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51863280/