在我的 Bootstrap 3 測試站點中，本地文件有一個可用的漢堡菜單，但是當我使用 GitHub 頁面托管它時，導航欄不起作用

Question

我用引導程序 3（ https://dylantn.github.io/Dusic/ ）在這個站點上創建了一個測試站點，漢堡菜單不起作用，但是當我打開本地文件時，漢堡菜單有效，任何人都可以找到什么可能對這個具體問題有用

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 user-scalable=no" charset="utf-8">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" href="ind.css">
  <title>Dusic-The Free Music Player Worldwide.</title>
</head>
<body>
  <div class="container">
    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
      <div class="container">
      <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-nav-demo" aria-expanded="false">
              <span class="sr-only"><font face="arial"></font>Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
          <a href="#" class="navbar-brand"><font face="arial"><span  class="navimg"><img src="dusic4.gif"  width="80" length="80" alt=""></span></font></a>
      </div>
          <div class="collapse navbar-collapse" id="bs-nav-demo">
              <ul class="nav navbar-nav">
                  <li><a href="#"><font face="arial">About</font></a></li>
                  <li><a href="#"><font face="arial">Contact</font></a></li>
              </ul>
  
              <ul class="nav navbar-nav navbar-right">
                  <li><a href="#"><font face="arial">Sign Up</font></a></li>
                  <li><a href="#"><font face="arial">Login</font></a></li>
              </ul>
          
          </div>
              
      </div>
  </nav>
  </div>
    <div class="container">
    <div class="jumbotron">
      <div class="row">
        <div class="col-lg-12">
          <div id="content">
          <h1><b><a href="#"><img src="dusic4.gif"  width="250" length="250"></a></b></h1>
          <h3><b>The Best Collection of Music That Ain't Worldwide...... MAN</b></h3>
          <hr>
        </div>
      </div>
        </div>
      </div>
    </div>

    <div class="container">
    <h1>What is the purpose of Dusic?</h1>
    <p>Our Society already has many music players, but i thought we need another one to clutter your life, plus it is Free!!</p>
    <br><h3>IT IS FREE!! THAT IS THE ONLY COOL FEATURE ABOUT THIS THAT SEPERATES THIS FROM EVERYTHING ELSE<br>YIPEEEEE!</h3>  
  </div>
    <script src="http://code.jquery.com/jquery-2.1.4.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
</body>
</html>

Answer 1

這里的問題似乎是 jquery 說阻止加載混合活動內容。

我從這個問題中得到了這個答案：為什么我在 Firefox 中突然出現“阻止加載混合活動內容”問題？

什么是混合內容？

當用戶訪問通過 HTTP 提供的頁面時，他們的連接會打開以進行竊聽和中間人 (MITM) 攻擊。 當用戶訪問通過 HTTPS 提供的頁面時，他們與 web 服務器的連接將通過 SSL 進行身份驗證和加密，從而免受竊聽者和 MITM 的攻擊。

However, if an HTTPS page includes HTTP content, the HTTP portion can be read or modified by attackers, even though the main page is served over HTTPS. 當 HTTPS 頁面具有 HTTP 內容時，我們稱該內容為“混合”。 用戶正在訪問的網頁僅部分加密，因為某些內容是通過 HTTP 未加密檢索的。 混合內容阻止程序阻止 HTTPS 頁面上的某些 HTTP 請求。

就我而言，解決方案是簡單地確保 jquery 包括如下（注意協議的刪除）：

<link rel="stylesheet" href="//code.jquery.com/ui/1.8.10/themes/smoothness/jquery-ui.css" type="text/css">
<script type="text/javascript" src="//ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/jquery-ui.min.js"></script>

請注意，臨時“修復”是單擊地址欄左上角的“屏蔽”圖標和 select“禁用此頁面上的保護”，盡管出於明顯的原因不建議這樣做。

更新：來自 Firefox (Mozilla) 支持頁面的此鏈接在解釋什么構成混合內容時也很有用，並且如上段所述，確實提供了如何顯示頁面的詳細信息，無論如何：

大多數網站將繼續正常運行，您無需采取任何行動。

如果您需要允許顯示混合內容，您可以輕松地做到這一點：

單擊地址欄中的盾牌圖標混合內容盾牌，然后從下拉菜單中選擇禁用此頁面上的保護。

地址欄中的圖標將變為橙色警告三角形警告標識圖標，以提醒您正在顯示不安全的內容。

要恢復之前的操作（重新阻止混合內容），只需重新加載頁面。

鏈接到這篇文章： https://blog.mozilla.org/tanvi/2013/04/10/mixed-content-blocking-enabled-in-firefox-23/

順便說一句，我嘗試了您在上面發布的代碼並在 codepen 中復制並運行它，效果很好。

在我的 Bootstrap 3 測試站點中，本地文件有一個可用的漢堡菜單，但是當我使用 GitHub 頁面托管它時，導航欄不起作用

問題描述

1 個解決方案

解決方案1
0

在我的 Bootstrap 3 測試站點中，本地文件有一個可用的漢堡菜單，但是當我使用 GitHub 頁面托管它時，導航欄不起作用

問題描述

1 個解決方案

解決方案1 0

解決方案1
0