2016-11-21 65 views
0

我在test.html中編碼了一個垂直標籤,當我用我的瀏覽器從我的硬盤驅動器打開它時,它工作正常。它看起來像這樣:垂直標籤在github上無法正常顯示

Correct display

但是當我使用github上打開網頁,它不再正常顯示。它變成這樣:

Wrong display

請,可能是什麼問題呢?這是我的代碼:

<script> 
    function openFood(evt, foodName) 
    { 
     var i, x, tablinks; 
     x = document.getElementsByClassName("food"); 
     for (i = 0; i < x.length; i++) 
     { 
      x[i].style.display = "none"; 
     } 
      tablinks = document.getElementsByClassName("tablink"); 
      for (i = 0; i < x.length; i++) 
      { 
       tablinks[i].className = tablinks[i].className.replace(" w3-red", ""); 
      } 
       document.getElementById(foodName).style.display = "block"; 
       evt.currentTarget.className += " w3-red"; 
     } 
    </script> 

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>Test</title> 
    <link rel="stylesheet" href="css/bootstrap.min.css"> 
    <link rel="stylesheet" href="css/style.css"> 
    <link href='https://fonts.googleapis.com/css?family=Oxygen:400,300,700' rel='stylesheet' type='text/css'> 
    <link href='https://fonts.googleapis.com/css?family=Lora' rel='stylesheet' type='text/css'> 
    <link href='http://www.w3schools.com/lib/w3.css' rel='stylesheet' type='text/css'> 
    </head> 

    <nav class="w3-sidenav w3-light-grey w3-card-2" id="size"> 
      <div class="w3-container"> 
       <h5><b>Category</b></h5> 
      </div> 
      <a href="javascript:void(0)" class="tablink" onclick="openFood(event, 'Rice')">Rice</a> 
      <a href="javascript:void(0)" class="tablink" onclick="openFood(event, 'Noodles')">Noodles</a> 
      <a href="javascript:void(0)" class="tablink" onclick="openFood(event, 'Chicken')">Chicken</a> 
      <a href="javascript:void(0)" class="tablink" onclick="openFood(event, 'Beef')">Beef</a> 
     </nav> 
+0

你確定正確的CSS加載?另外,請不要加載您的自定義css文件,然後加載第三方工作表。 – Grey

回答

0

我想通了這個問題。由於加密較弱,我的瀏覽器阻止了部分頁面。

view