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>