Question

我正在尝试模仿单击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?

jquery click() on a link

Having trouble using jquery to click on a link

click event on a link doesn't work in jquery

Answer 1

要在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>

jQuery .click（）不能完成与实际单击链接相同的过程；需要点击实际链接以完成流程

1 个答案: