代码之家 › 专栏 › 技术社区 › Dan

click()没有完成与实际单击链接相同的过程;需要单击实际链接才能使该过程正常工作

twitter-bootstrap jquery javascript

Dan · 技术社区 · 7 年前

我试图模拟在我的html页面上点击链接的过程。我正在使用jquery .click() 在选择器上运行。链接是引导的一部分 nav-pills 基于制表符的窗体。当我点击 纳芙丸 链接,它工作得很好-窗体上的选项卡显示并显示该选项卡上的所有字段。当我运行下面的代码时- .click() 函数-它显示选项卡,但在我手动单击之前,选项卡上不会显示任何字段 纳芙丸 链接。

代码如下:

$("#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");
});

这是鞋带 纳芙丸 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

1 回复 | 直到 7 年前

Unmitigated 7 年前

要在引导中显示选项卡,需要使用 $(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>