Bootstrap nav-pills ruby on rails，而不是切换
Bootstrap nav-pills ruby on rails，而不是切换
提问于 2016-04-21 22:20:55
我有一个应用程序，如果我拉出代码，并放入创建一个单独的html文件，只需此代码，它就可以工作。
<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应用程序中通过它，它将加载，但当我单击instructions选项卡(menu1)时，它将突出显示该选项，但不会更改内容。所有其他选项卡都工作得很好！
这是我的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>回答 2
Stack Overflow用户
发布于 2016-04-21 22:32:39
您是否正在加载
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(..)代码的代码？
Stack Overflow用户
发布于 2016-04-21 22:54:27
我修复了我的无效语法，在我的项目中有两个头文件
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/36772481
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号