个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-28 06:00:46 24 4
gpt4 key购买 nike

我有一个应用程序，如果我提取代码并创建一个单独的 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 应用程序中通过它，它会加载，但是当我单击说明选项卡 (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>

最佳答案

你在加载吗

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(..) 代码的情况下尝试过您的代码？

关于html - Bootstrap nav nav-pills ruby​​ on rails，不切换，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36772481/

24 4 0
文章推荐： javascript - 如何检测/处理浏览器无法播放媒体文件的问题
文章推荐： c++ - 链表删除
文章推荐： swift - 使用 RxSwift 链接操作
文章推荐： ios - XCODE - 链接器命令失败，退出代码为 1 - 自 xcode 更新以来
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com