Question

我有一个应用程序，如果我拉出代码并创建一个单独的html文件只有它的工作原理。

fetch_query_exists

但是，如果我在我的rails应用程序中通过它，它将加载，但是当我单击指令选项卡（menu1）时，它将突出显示该选项但不更改内容。所有其他选项卡都很棒！

这是我的红宝石代码

<html>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<body>

<div id="instruction">       
        <ul class="nav nav-pills">
          <li class="active"><a data-toggle="pill" href="#home">About</a></li>
          <li><a data-toggle="pill" href="#menu1">Instructions</a></li>
          <li><a data-toggle="pill" href="#menu2">Menu 2</a></li>
          <li><a data-toggle="pill" href="#menu3">Menu 3</a></li>
        </ul>

      <div class="tab-content">
        <div id="home" class="tab-pane fade in active">
          <h3>About</h3>
          <p>This application uses the United States Postal Service web application to verify US addresses that can result in improved mail deliverability, speed of delivery, and reductions in the cost of returned mail.  </p>
        </div>
        <div id="menu1" class="tab-pane fade">
          <h3>Instructions</h3>
          1. Export your addresses into a spreadsheet program (e.g., Microsoft Excel)</br><font color="red">Note:</font> We have included a template that can be used. Download the template: csv or an Excel version
          <br>
          Special Characters: Please pay close attention to the use of special characters and extra spaces in addresses. The intentional or inadvertent addition of special characters and extra spaces to an address may result in errors and formatting issues when an address is cleansed. The errors may not result in an error message, making it difficult to identify the problem. Examples of special characters are those located on the number keys of your keyboard.
          <br>
          Campus Addresses: This application does not cleanse campus addresses that contain mail stops. If a campus address includes a mail stop it may be dropped during verification.
          <br>
          Template Columns: The template file contains thirteen columns. The column headings are critical to the file processing. Each column of address data must be labeled with the correct column heading for the address data to be processed. If the column of address data is not labeled correctly, the data in that column will be ignored. Not every column needs to be present for the address data to be processed.
          Descriptions of the columns are provided in the table below.

          <h3>Description of columns</h3>
            </br>
            <div class="table-responsive">
              <table class="table">
                <thead> 
                  <tr>
                    <th>Column Name</th>
                    <th>Description</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <th>KEY_ID</th>
                    <th>An identifier defined by the user; used to uniquely identify address rows
            Not required but useful for matching rows to the message file</th>
                  </tr>
                  <tr>
                    <th>COMPANY</th>
                    <th>Organization name</th>
                  </tr>
                  <tr>
                    <th>ADDRESS_NAME</th>
                    <th>Name of a person</th>
                  </tr>
                  <tr>
                    <th>ADDRESS_1</th>
                    <th>Street address or description (e.g. 100 Main Street or Student Assistance Division)
            At least one address field must be included for an address to be verified</th>
                  </tr>
                  <tr>
                    <th>ADDRESS_2</th>
                    <th>Street address or secondary description (e.g. - Apt 2 or Pell Grant Section)</th>
                  </tr>
                  <tr>
                    <th>KEY_ID</th>
                    <th>Company Name</th>
                  </tr>
                  <tr>
                    <th>KEY_ID</th>
                    <th>Company Name</th>
                  </tr>
                </tbody>
              </table>
            </div>
        </div>
        <div id="menu2" class="tab-pane fade">
          <h3>Menu 2</h3>
          <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
        </div>
        <div id="menu3" class="tab-pane fade">
          <h3>Menu 3</h3>
          <p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
        </div>
      </div>
      </div>
  </body>
</html>

Answer 1

你正在加载

http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js

和

http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css

正确？

另外，您是否在没有$(document).ready(function()....slideToggle(..)代码的情况下尝试了代码？

Answer 2

我修复了我的无效语法，我在项目中有两个标题

Bootstrap nav nav-pills ruby on rails，而不是切换

2 个答案:

Bootstrap nav nav-pills ruby​​ on rails，而不是切换

2 个答案:

Bootstrap nav nav-pills ruby on rails，而不是切换