0
我有一个应用程序，如果我拉出代码，并把它创建一个单独的HTML文件，只是这个代码的作品。Bootstrap导航导航药丸轨道上的红宝石，而不是切换
<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>
但是如果我通过它在我的Rails应用程序，它会加载，但是当我点击的说明标签（菜单1）就可以将突出选项，但不会改变内容。所有其他标签都很棒！
这里是我的Ruby代码
<% if current_user%>
<div id="OpenInstructions">
<H2>About Address Cleaner</H2>
</div>
<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">
<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 in active">
<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>
<% end %>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#OpenInstructions").click(function(){
$("#instruction").slideToggle("slow");
});
});
</script>