那些遇到过的问题

为什么我的 javascript 函数没有运行？

Sia*_*die 1 html javascript css

我正在建立一个网页。在我的菜单页面上，我试图制作一个功能，当我单击素食选项时，主要选项消失，而素食选项出现。但是，这需要使用 javascript，而我对 javascript 很陌生。我创建了一个名为 showveg() 的函数（如下），但为我的按钮创建了一个 onclick 函数，但没有任何反应。这是我的代码。

// function displayhidden(class){
//  document.getElementByClass("menumain").style.display = "hidden";
// }
function showveg() {
  document.getElementByClass("menumain").style.visibility = "hidden";
  document.getElementByClass("price").style.visibility = "hidden";
  document.getElementByClass("dishtitle").style.visibility = "hidden";
  document.getElementByClass("dishinfo").style.visibility = "hidden";
  document.getElementByClass("key").style.visibility = "hidden";
  document.getElementByClass("doro").style.visibility = "hidden";
  document.getElementByClass("yebeg").style.visibility = "hidden";
  document.getElementByClass("kitfo").style.visibility = "hidden";
  document.getElementByClass("beeftibs").style.visibility = "hidden";
  document.getElementByClass("lambtibs").style.visibility = "hidden";

  document.getElementByClass("menuveg").style.visibility = "visible";
  document.getElementByClass("price2").style.visibility = "visible";
  document.getElementByClass("dishtitle2").style.visibility = "visible";
  document.getElementByClass("dishinfo2").style.visibility = "visible";
  document.getElementByClass("key2").style.visibility = "visible";
  document.getElementByClass("doro2").style.visibility = "visible";
  document.getElementByClass("yebeg2").style.visibility = "visible";
  document.getElementByClass("kitfo2").style.visibility = "visible";
  document.getElementByClass("beeftibs2").style.visibility = "visible";
  document.getElementByClass("lambtibs2").style.visibility = "visible";

}
Run Code Online (Sandbox Code Playgroud) 
/* Start Variables */

:root {
  --aa-color: #57C324;
}


/* End Variables */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'Source Sans Pro', sans-serif;
}


/* Start Navbar */

.navbar-wrapper {
  // background: blue;
  padding: 20px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 5px 10px 8px #888888;
  z-index: 100;
  position: relative;
}

.leftside {
  // background: green;
  width: 50%;
  height: 10px;
}

.rightside {
  width: 50%;
  // background: red;
}

.options {
  // background: yellow;
  text-decoration: none;
  width: 100%;
  display: flex;
  justify-content: flex-end;
}

.linkhome {
  font-size: 120%;
  text-decoration: none;
  color: black;
  margin-right: 0%;
  margin-left: 2%;
  display: inline-block;
}

.linkmenu {
  font-size: 120%;
  text-decoration: none;
  color: var(--aa-color);
  ;
  margin-right: 0%;
  margin-left: 2%;
  display: inline-block;
}

.linkabout {
  font-size: 120%;
  text-decoration: none;
  color: black;
  margin-right: 0%;
  margin-left: 2%;
  display: inline-block;
}

.linkfood {
  font-size: 120%;
  text-decoration: none;
  color: black;
  margin-right: 0%;
  margin-left: 2%;
  display: inline-block;
}

.linkculture {
  font-size: 120%;
  text-decoration: none;
  color: black;
  margin-right: 0%;
  margin-left: 2%;
  display: inline-block;
}

.linkmenu:hover {
  color: var(--aa-color);
}

.linkabout:hover {
  color: var(--aa-color);
}

.linkfood:hover {
  color: var(--aa-color);
}

.linkculture:hover {
  color: var(--aa-color);
}


/* End Navbar */


/* Start Main */

.injera-menu {
  background-size: cover;
  overflow: hidden;
  width: 100%;
  height: 10%;
  display: block;
}

.ourmenutext {
  position: absolute;
  margin-top: -25%;
  font-size: 400%;
  background: -webkit-linear-gradient(#10CB00, #10CB00, #FFC701, #FF0101, #FF0101);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 3px white;
  -webkit-text-stroke: 3px black;
  margin-left: 3%;
}

.menuoptions {
  display: flex;
  width: 100%;
  justify-content: center;
}

.mainoption {
  margin: 2% 5%;
  color: var(--aa-color);
}

.vegoption {
  margin: 2% 5%;
}

.specialoption {
  margin: 2% 5%;
}

.drinksoption {
  margin: 2% 5%;
}

.vegoption:hover {
  color: var(--aa-color)
}

.specialoption:hover {
  color: var(--aa-color)
}

.drinksoption:hover {
  color: var(--aa-color)
}


/* Start Menu */

.menu {
  position: relative;
}


/* Start Main Menu */

.menumain {
  justify-content: center;
  color: var(--aa-color)
}

.price {
  float: right;
  border: 1px solid var(--aa-color);
  padding: 1% 2%;
}

.dishtitle {
  margin-left: 40%;
  text-decoration: underline;
}

.dishinfo {
  padding: 5% 10%;
  font-size: 150%;
}

.key {
  width: 70%;
  border: 3px solid var(--aa-color);
  padding: 20px;
  margin-left: 15%;
  margin-bottom: 5%;
  box-shadow: 5px 10px 8px #888888;
}

.doro {
  width: 70%;
  border: 3px solid var(--aa-color);
  padding: 20px;
  margin-left: 15%;
  margin-bottom: 5%;
  box-shadow: 5px 10px 8px #888888;
}

.yebeg {
  width: 70%;
  border: 3px solid var(--aa-color);
  padding: 20px;
  margin-left: 15%;
  margin-bottom: 5%;
  box-shadow: 5px 10px 8px #888888;
}

.kitfo {
  width: 70%;
  border: 3px solid var(--aa-color);
  padding: 20px;
  margin-left: 15%;
  margin-bottom: 5%;
  box-shadow: 5px 10px 8px #888888;
}

.beeftibs {
  width: 70%;
  border: 3px solid var(--aa-color);
  padding: 20px;
  margin-left: 15%;
  margin-bottom: 5%;
  box-shadow: 5px 10px 8px #888888;
}

.lambtibs {
  width: 70%;
  border: 3px solid var(--aa-color);
  padding: 20px;
  margin-left: 15%;
  margin-bottom: 5%;
  box-shadow: 5px 10px 8px #888888;
}


/* End Main Menu */


/* Start Vegetarian Menu */

.menuveg {
  justify-content: center;
  color: var(--aa-color);
  visibility: hidden;
}

.price2 {
  float: right;
  border: 1px solid var(--aa-color);
  padding: 1% 2%;
  visibility: hidden;
}

.dishtitle2 {
  margin-left: 40%;
  text-decoration: underline;
  visibility: hidden;
}

.dishinfo2 {
  padding: 5% 10%;
  font-size: 150%;
  visibility: hidden;
}

.key2 {
  width: 70%;
  border: 3px solid var(--aa-color);
  padding: 20px;
  margin-left: 15%;
  margin-bottom: 5%;
  box-shadow: 5px 10px 8px #888888;
  visibility: hidden;
}

.doro2 {
  width: 70%;
  border: 3px solid var(--aa-color);
  padding: 20px;
  margin-left: 15%;
  margin-bottom: 5%;
  box-shadow: 5px 10px 8px #888888;
  visibility: hidden;
}

.yebeg2 {
  width: 70%;
  border: 3px solid var(--aa-color);
  padding: 20px;
  margin-left: 15%;
  margin-bottom: 5%;
  box-shadow: 5px 10px 8px #888888;
  visibility: hidden;
}

.kitfo2 {
  width: 70%;
  border: 3px solid var(--aa-color);
  padding: 20px;
  margin-left: 15%;
  margin-bottom: 5%;
  box-shadow: 5px 10px 8px #888888;
  visibility: hidden;
}

.beeftibs2 {
  width: 70%;
  border: 3px solid var(--aa-color);
  padding: 20px;
  margin-left: 15%;
  margin-bottom: 5%;
  box-shadow: 5px 10px 8px #888888;
  visibility: hidden;
}

.lambtibs2 {
  width: 70%;
  border: 3px solid var(--aa-color);
  padding: 20px;
  margin-left: 15%;
  margin-bottom: 5%;
  box-shadow: 5px 10px 8px #888888;
  visibility: hidden;
}


/* End Vegetarian Menu */


/* End Menu */


/* End Main */
Run Code Online (Sandbox Code Playgroud) 
<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>Addis Abeba | Menu</title>
  <link rel="stylesheet" href="/css/menu.css">
  <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@900&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300&display=swap" rel="stylesheet">
</head>

<body>
  <!-- Start Navbar -->
  <nav>
    <div class="navbar-wrapper">
      <div class="leftside">

      </div>
      <div class="rightside">
        <div class="options">
          <a href="#" class="linkhome">Home</a>
          <a href="menu.html" class="linkmenu">Menu</a>
          <a href="#" class="linkabout">About Us</a>
          <a href="#" class="linkfood">Our Food</a>
          <a href="#" class="linkculture">Ethiopian Culture</a>
        </div>
      </div>
    </div>
  </nav>
  <!-- End Navbar -->

  <!-- Start Main -->
  <div class="our-menu">
    <div class="ourmenusection">
      <div class="img1">
        <img src="img/injera.png" alt="injera" class="injera-menu">
      </div>
      <div class="text-ourmenu">
        <h1 class="ourmenutext">

          Menu</h1>
      </div>
    </div>
  </div>

  <div class="menuoptions">
    <h2 class="mainoption">Main</h2>
    <button type="button" class="vegbut" name="button" onclick="showveg()"><h2 class="vegoption">Vegetarian</h2></button>
    <button onclick="showveg()">Click me</button>
    <h2 class="specialoption">Special</h2>
    <h2 class="drinksoption">Drinks</h2>
  </div>

  <div class="menu">

    <!-- Start Main Menu -->
    <div class="menumain">
      <div class="key">
        <div class="price">
          <p>CHF 21.-</p>
        </div>
        <div class="dishtitle">
          <h1>Key Wat</h1>
        </div>
        <div class="dishinfo">
          Tender morsels of meat prepared in specially spiced butter, seasoned with onions and green peppers, sprinkled with garlic and ginger.
        </div>
      </div>

      <div class="doro">
        <div class="price">
          <p>CHF 23.-</p>
        </div>
        <div class="dishtitle">
          <h1>Doro Wat</h1>
        </div>
        <div class="dishinfo">
          Chicken cooked in specially seasoned red sauce and Ethiopian butter.
        </div>
      </div>

      <div class="yebeg">
        <div class="price">
          <p>CHF 23.-</p>
        </div>
        <div class="dishtitle">
          <h1>Yebeg Wat</h1>
        </div>
        <div class="dishinfo">
          Morsels of lamb prepared in special herb butter, seasoned with onions and green peppers and sprinkled with garlic and ginger.
        </div>
      </div>

      <div class="kitfo">
        <div class="price">
          <p>CHF 25.-</p>
        </div>
        <div class="dishtitle">
          <h1>Kitfo</h1>
        </div>
        <div class="dishinfo">
          Steak tartare, Ethiopian style, seasoned with special hot red pepper and spiced butter
        </div>
      </div>

      <div class="beeftibs">
        <div class="price">
          <p>CHF 24.-</p>
        </div>
        <div class="dishtitle">
          <h1>Beef Tibs</h1>
        </div>
        <div class="dishinfo">
          Strips of beef sauteed with onion and pepper.
        </div>
      </div>

      <div class="lambtibs">
        <div class="price">
          <p>CHF 24.-</p>
        </div>
        <div class="dishtitle">
          <h1>Lamb Tibs</h1>
        </div>
        <div class="dishinfo">
          Cubes of lamb fried in buter, onions, green and black peppers.
        </div>
      </div>
    </div>

    <!-- Start Vegetarian Menu -->

    <div class="menuveg">
      <div class="key2">
        <div class="price2">
          <p>CHF 21.-</p>
        </div>
        <div class="dishtitle2">
          <h1>Shiro</h1>
        </div>
        <div class="dishinfo2">
          Tender morsels of meat prepared in specially spiced butter, seasoned with onions and green peppers, sprinkled with garlic and ginger.
        </div>
      </div>

      <div class="doro2">
        <div class="price2">
          <p>CHF 23.-</p>
        </div>
        <div class="dishtitle2">
          <h1>Doro Wat</h1>
        </div>
        <div class="dishinfo2">
          Chicken cooked in specially seasoned red sauce and Ethiopian butter.
        </div>
      </div>

      <div class="yebeg2">
        <div class="price2">
          <p>CHF 23.-</p>
        </div>
        <div class="dishtitle2">
          <h1>Yebeg Wat</h1>
        </div>
        <div class="dishinfo2">
          Morsels of lamb prepared in special herb butter, seasoned with onions and green peppers and sprinkled with garlic and ginger.
        </div>
      </div>

      <div class="kitfo2">
        <div class="price2">
          <p>CHF 25.-</p>
        </div>
        <div class="dishtitle2">
          <h1>Kitfo</h1>
        </div>
        <div class="dishinfo2">
          Steak tartare, Ethiopian style, seasoned with special hot red pepper and spiced butter
        </div>
      </div>

      <div class="beeftibs2">
        <div class="price2">
          <p>CHF 24.-</p>
        </div>
        <div class="dishtitle2">
          <h1>Beef Tibs</h1>
        </div>
        <div class="dishinfo2">
          Strips of beef sauteed with onion and pepper.
        </div>
      </div>

      <div class="lambtibs2">
        <div class="price2">
          <p>CHF 24.-</p>
        </div>
        <div class="dishtitle2">
          <h1>Lamb Tibs</h1>
        </div>
        <div class="dishinfo2">
          Cubes of lamb fried in buter, onions, green and black peppers.
        </div>
      </div>
    </div>
  </div>

  <!-- End Main -->
</body>

</html>
Run Code Online (Sandbox Code Playgroud)

任何帮助是极大的赞赏。谢谢！

Omr*_*iya 5

所以你在这里做了一些不好的事情，我想建议你改变：

  1. 你用的document.getElementsByClass("menumain")哪个不存在！正确的使用方法是document.getElementsByClassName("menumain")[0]。您正在使用[0]因为getElementsByClassName返回 HTML 集合对象（访问它就像访问数组），并且由于您只有一个带有 class 的menumain元素，因此该元素将是数组中的第一项（索引0）。
  2. 由于每个菜单项的样式实际上都相同，因此您不需要为每个菜单项设置单独的类——它只会让您的代码变得凌乱、冗长且难以阅读。因此，在下面的代码段中，我将每个菜单项都切换为menu-item类，并从 css 中删除了不再需要的内容。
  3. 为了使元素在不可见时不发生，请使用style.display = "none"代替style.visibility = "hidden"。如果你不这样做，你就会有一个空白的空白（因为元素存在于页面上但被隐藏了）。
  4. 为了隐藏整个菜单，您不需要隐藏菜单中的每个元素。您只需要隐藏所有这些元素的父元素（在本例中为menuveg）。

下面是我在这里写的所有内容的片段：

function showveg() {
  document.getElementsByClassName("menumain")[0].style.display = "none";
  document.getElementsByClassName("menuveg")[0].style.display = "inline-block";
}
Run Code Online (Sandbox Code Playgroud) 
/* Start Variables */

:root {
  --aa-color: #57C324;
}


/* End Variables */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'Source Sans Pro', sans-serif;
}


/* Start Navbar */

.navbar-wrapper {
  // background: blue;
  padding: 20px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 5px 10px 8px #888888;
  z-index: 100;
  position: relative;
}

.leftside {
  // background: green;
  width: 50%;
  height: 10px;
}

.rightside {
  width: 50%;
  // background: red;
}

.options {
  // background: yellow;
  text-decoration: none;
  width: 100%;
  display: flex;
  justify-content: flex-end;
}

.linkhome {
  font-size: 120%;
  text-decoration: none;
  color: black;
  margin-right: 0%;
  margin-left: 2%;
  display: inline-block;
}

.linkmenu {
  font-size: 120%;
  text-decoration: none;
  color: var(--aa-color);
  ;
  margin-right: 0%;
  margin-left: 2%;
  display: inline-block;
}

.linkabout {
  font-size: 120%;
  text-decoration: none;
  color: black;
  margin-right: 0%;
  margin-left: 2%;
  display: inline-block;
}

.linkfood {
  font-size: 120%;
  text-decoration: none;
  color: black;
  margin-right: 0%;
  margin-left: 2%;
  display: inline-block;
}

.linkculture {
  font-size: 120%;
  text-decoration: none;
  color: black;
  margin-right: 0%;
  margin-left: 2%;
  display: inline-block;
}

.linkmenu:hover {
  color: var(--aa-color);
}

.linkabout:hover {
  color: var(--aa-color);
}

.linkfood:hover {
  color: var(--aa-color);
}

.linkculture:hover {
  color: var(--aa-color);
}


/* End Navbar */


/* Start Main */

.injera-menu {
  background-size: cover;
  overflow: hidden;
  width: 100%;
  height: 10%;
  display: block;
}

.ourmenutext {
  position: absolute;
  margin-top: -25%;
  font-size: 400%;
  background: -webkit-linear-gradient(#10CB00, #10CB00, #FFC701, #FF0101, #FF0101);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 3px white;
  -webkit-text-stroke: 3px black;
  margin-left: 3%;
}

.menuoptions {
  display: flex;
  width: 100%;
  justify-content: center;
}

.mainoption {
  margin: 2% 5%;
  color: var(--aa-color);
}

.vegoption {
  margin: 2% 5%;
}

.specialoption {
  margin: 2% 5%;
}

.drinksoption {
  margin: 2% 5%;
}

.vegoption:hover {
  color: var(--aa-color)
}

.specialoption:hover {
  color: var(--aa-color)
}

.drinksoption:hover {
  color: var(--aa-color)
}


/* Start Menu */

.menu {
  position: relative;
}


/* Start Main Menu */

.menumain {
  justify-content: center;
  color: var(--aa-color)
}

.price {
  float: right;
  border: 1px solid var(--aa-color);
  padding: 1% 2%;
}

.dishtitle {
  margin-left: 40%;
  text-decoration: underline;
}

.dishinfo {
  padding: 5% 10%;
  font-size: 150%;
}

.menu-item {
  width: 70%;
  border: 3px solid var(--aa-color);
  padding: 20px;
  margin-left: 15%;
  margin-bottom: 5%;
  box-shadow: 5px 10px 8px #888888;
}

.menuveg {
  justify-content: center;
  color: var(--aa-color);
  display: none;
}


/* End Vegetarian Menu */


/* End Menu */


/* End Main */
Run Code Online (Sandbox Code Playgroud) 
<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>Addis Abeba | Menu</title>
  <link rel="stylesheet" href="/css/menu.css">
  <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@900&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300&display=swap" rel="stylesheet">
</head>

<body>
  <!-- Start Navbar -->
  <nav>
    <div class="navbar-wrapper">
      <div class="leftside">

      </div>
      <div class="rightside">
        <div class="options">
          <a href="#" class="linkhome">Home</a>
          <a href="menu.html" class="linkmenu">Menu</a>
          <a href="#" class="linkabout">About Us</a>
          <a href="#" class="linkfood">Our Food</a>
          <a href="#" class="linkculture">Ethiopian Culture</a>
        </div>
      </div>
    </div>
  </nav>
  <!-- End Navbar -->

  <!-- Start Main -->
  <div class="our-menu">
    <div class="ourmenusection">
      <div class="img1">
        <img src="img/injera.png" alt="injera" class="injera-menu">
      </div>
      <div class="text-ourmenu">
        <h1 class="ourmenutext">

          Menu</h1>
      </div>
    </div>
  </div>

  <div class="menuoptions">
    <h2 class="mainoption">Main</h2>
    <button type="button" class="vegbut" name="button" onclick="showveg()"><h2 class="vegoption">Vegetarian</h2></button>
    <button onclick="showveg()">Click me</button>
    <h2 class="specialoption">Special</h2>
    <h2 class="drinksoption">Drinks</h2>
  </div>

  <div class="menu">

    <!-- Start Main Menu -->
    <div class="menumain">
      <div class="menu-item">
        <div class="price">
          <p>CHF 21.-</p>
        </div>
        <div class="dishtitle">
          <h1>Key Wat</h1>
        </div>
        <div class="dishinfo">
          Tender morsels of meat prepared in specially spiced butter, seasoned with onions and green peppers, sprinkled with garlic and ginger.
        </div>
      </div>

      <div class="menu-item">
        <div class="price">
          <p>CHF 23.-</p>
        </div>
        <div class="dishtitle">
          <h1>Doro Wat</h1>
        </div>
        <div class="dishinfo">
          Chicken cooked in specially seasoned red sauce and Ethiopian butter.
        </div>
      </div>

      <div class="menu-item">
        <div class="price">
          <p>CHF 23.-</p>
        </div>
        <div class="dishtitle">
          <h1>Yebeg Wat</h1>
        </div>
        <div class="dishinfo">
          Morsels of lamb prepared in special herb butter, seasoned with onions and green peppers and sprinkled with garlic and ginger.
        </div>
      </div>

      <div class="menu-item">
        <div class="price">
          <p>CHF 25.-</p>
        </div>
        <div class="dishtitle">
          <h1>Kitfo</h1>
        </div>
        <div class="dishinfo">
          Steak tartare, Ethiopian style, seasoned with special hot red pepper and spiced butter
        </div>
      </div>

      <div class="menu-item">
        <div class="price">
          <p>CHF 24.-</p>
        </div>
        <div class="dishtitle">
          <h1>Beef Tibs</h1>
        </div>
        <div class="dishinfo">
          Strips of beef sauteed with onion and pepper.
        </div>
      </div>

      <div class="menu-item">
        <div class="price">
          <p>CHF 24.-</p>
        </div>
        <div class="dishtitle">
          <h1>Lamb Tibs</h1>
        </div>
        <div class="dishinfo">
          Cubes of lamb fried in buter, onions, green and black peppers.
        </div>
      </div>
    </div>

    <!-- Start Vegetarian Menu -->

    <div class="menuveg">
      <div class="menu-item">
        <div class="price">
          <p>CHF 21.-</p>
        </div>
        <div class="dishtitle">
          <h1>Shiro</h1>
        </div>
        <div class="dishinfo">
          Tender morsels of meat prepared in specially spiced butter, seasoned with onions and green peppers, sprinkled with garlic and ginger.
        </div>
      </div>

      <div class="menu-item">
        <div class="price">
          <p>CHF 23.-</p>
        </div>
        <div class="dishtitle">
          <h1>Doro Wat</h1>
        </div>
        <div class="dishinfo">
          Chicken cooked in specially seasoned red sauce and Ethiopian butter.
        </div>
      </div>

      <div class="menu-item">
        <div class="price">
          <p>CHF 23.-</p>
        </div>
        <div class="dishtitle">
          <h1>Yebeg Wat</h1>
        </div>
        <div class="dishinfo">
          Morsels of lamb prepared in special herb butter, seasoned with onions and green peppers and sprinkled with garlic and ginger.
        </div>
      </div>

      <div class="menu-item">
        <div class="price">
          <p>CHF 25.-</p>
        </div>
        <div class="dishtitle">
          <h1>Kitfo</h1>
        </div>
        <div class="dishinfo">
          Steak tartare, Ethiopian style, seasoned with special hot red pepper and spiced butter
        </div>
      </div>

      <div class="menu-item">
        <div class="price">
          <p>CHF 24.-</p>
        </div>
        <div class="dishtitle">
          <h1>Beef Tibs</h1>
        </div>
        <div class="dishinfo">
          Strips of beef sauteed with onion and pepper.
        </div>
      </div>

      <div class="menu-item">
        <div class="price">
          <p>CHF 24.-</p>
        </div>
        <div class="dishtitle">
          <h1>Lamb Tibs</h1>
        </div>
        <div class="dishinfo">
          Cubes of lamb fried in buter, onions, green and black peppers.
        </div>
      </div>
    </div>
  </div>

  <!-- End Main -->
</body>

</html>
Run Code Online (Sandbox Code Playgroud)

我想建议你做一些事情，让你的工作更好：

  1. 如果某些东西对您不起作用 - 检查互联网如何做事或打开控制台，看看您的代码是否有任何错误。
  2. css 类的约定是menu-item和 not menuitem。
  3. 您有很多具有相同样式的 css 类。为什么不把他们都聚集在同一个班级？就像我对你所做的一样menu-item
  4. 您可以使用 javascript 代码将所有菜单项添加到您的页面，而不是将它们硬编码到 html 中 - 这将使您的工作更轻松。

祝你好运:D

归档时间：

查看次数：

87 次

最近记录：

4 年，9 月 前
相关归档
使用jQuery检测iPad用户？ 166
如何模拟数据绑定视图中的If-Else结构？ 94
使用$ window或$ location在AngularJS中重定向 88
mocha before()中的异步函数总是在它()规范之前完成？ 85
使用Node.js构建网站的最佳实践 79
如何在CSS中对图像进行叠加？ 54
Firefox -moz-border-radius不会裁剪图像？ 49
window.history.pushState刷新浏览器 38
如何防止图像溢出圆角框？ 37
CSS翻译后可以"捕捉到像素"吗？ 31
难疑归档
如何在JavaScript中检查"undefined"？ 2294
如何在JavaScript中获取当前日期？ 2152
如何更改一个特定提交的提交作者？ 1949
如何退出PostgreSQL命令行实用程序:psql 1770
如何分析在Linux上运行的C++代码？ 1732
显示屏上的转换:属性 1322
如何将键/值对添加到JavaScript对象？ 1270
在Android Studio中重命名包 1252
六角透明的颜色 1219
R无法解析 - Android错误 1056