Question

我在 test.html 中编写了一个垂直标签，当我用浏览器从硬盘中打开它时，它可以正常工作。它看起来像这样：

但是当我使用github打开网页时，它不再正常显示。它变成了这个：

请问，可能是什么问题？这是我的代码：

<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>

Answer 1

我弄明白了这个问题。由于加密不足，我的浏览器阻止了部分页面。

view

垂直选项卡无法在github上正确显示

1 个答案: