Question

我确信这里缺少一些简单的东西：我正在创建具有不同图像叠加层的地图。我可以使用该地图，但是只有按一下按钮才能显示该地图。我需要它经常出现。当前，地图被设置为背景图像。如果将其设置为图像，则所有按钮均无效。有人知道我在想什么吗？

var alertName = document.getElementsByClassName("alertName");

var myFunction = function() {

  var hide = document.getElementsByClassName("hide");

  for (var i = 0; i < hide.length; i++) {

    hide[i].style.display = "none";

  }

  var name = this.getAttribute("name");

  var show = document.querySelector('.' + name);

  if (show.style.display = "none") {

    show.style.display = "block";

  } else {

    show.style.display = "none";

  }

};

for (var i = 0; i < alertName.length; i++) {

  alertName[i].addEventListener('click', myFunction);

}

.hide {
  z-index: 2;
  display: none;
}

.hidingsection {
  background-image: url("https://res.cloudinary.com/dnu8yyawg/image/upload/v1559077777/elke/map_base_1_gv6ehh.png");
  background-repeat: no-repeat;
}

.container {
  display: flex;
  flex-flow: row
}

.hidingsection {
  z-index: 0;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>repl.it</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <div class="container">
    <div class="map">
      <section class="hidingsection">

        <div class="hide schoolContent">

          <img src="https://res.cloudinary.com/dnu8yyawg/image/upload/v1559077188/elke/schools_pyqexw.png" />

        </div>
        <div class="hide recreationContent">
          <img src="https://res.cloudinary.com/dnu8yyawg/image/upload/v1559077189/elke/recreation_psbfyp.png" />

        </div>

        <div class="hide restaurantsContent">

          <img src="https://res.cloudinary.com/dnu8yyawg/image/upload/v1559077188/elke/restaurants_xjbtbd.png" />

        </div>

        <div class="hide banksContent">

          <img src="https://res.cloudinary.com/dnu8yyawg/image/upload/v1559077188/elke/banks_zohw39.png" />

        </div>

        <div class="hide groceriesContent">

          <img src="https://res.cloudinary.com/dnu8yyawg/image/upload/v1559077188/elke/groceries_xjaddd.png" />

        </div>

        <div class="hide transportationContent">

          <img src="https://res.cloudinary.com/dnu8yyawg/image/upload/v1559077188/elke/transportation_mzzclu.png" />

        </div>

        <div class="hide libraryContent">

          <img src="https://res.cloudinary.com/dnu8yyawg/image/upload/v1559077188/elke/library_pbesf1.png" />

        </div>

      </section>
    </div>
    <div class="buttons">
      <section>
        <div>

          <button class="alertName" name="schoolContent">Schools</button>

          <button class="alertName" name="recreationContent">Recreation</button>

          <button class="alertName" name="restaurantsContent">Restaurants</button>

          <button class="alertName" name="banksContent">Banks</button>

          <button class="alertName" name="groceriesContent">Groceries</button>

          <button class="alertName" name="transportationContent"> Transportation</button>

          <button class="alertName" name="libraryContent">Library</button>

        </div>
      </section>
    </div>

</body>

</html>

Answer 1

由于所有内部div都被隐藏（因此没有内容），因此父级（外部）div没有初始高度。

在该部分添加尺寸，您将看到bg图片

即

.hidingsection {
    z-index: 0;
    width: 1280px;
    height: 800px;
    background-image: url("https://res.cloudinary.com/dnu8yyawg/image/upload/v1559077777/elke/map_base_1_gv6ehh.png");
}

（当然，您需要调整上面给出的值以适合您的需求）

请参见下面的演示

var alertName = document.getElementsByClassName("alertName");

var myFunction = function() {

  var hide = document.getElementsByClassName("hide");

  for (var i = 0; i < hide.length; i++) {

    hide[i].style.display = "none";

  }

  var name = this.getAttribute("name");

  var show = document.querySelector('.' + name);

  if (show.style.display = "none") {

    show.style.display = "block";

  } else {

    show.style.display = "none";

  }

};

for (var i = 0; i < alertName.length; i++) {

  alertName[i].addEventListener('click', myFunction);

}

.hide {
  z-index: 2;
  display: none;
}

.hidingsection {
    z-index: 0;
    width: 1280px;
    height: 800px;
    background-image: url("https://res.cloudinary.com/dnu8yyawg/image/upload/v1559077777/elke/map_base_1_gv6ehh.png");
}

.container {
  display: flex;
  flex-flow: row
}

.hidingsection {

}

<div class="container">
  <div class="buttons">
    <section>
      <div>

        <button class="alertName" name="schoolContent">Schools</button>

        <button class="alertName" name="recreationContent">Recreation</button>

        <button class="alertName" name="restaurantsContent">Restaurants</button>

        <button class="alertName" name="banksContent">Banks</button>

        <button class="alertName" name="groceriesContent">Groceries</button>

        <button class="alertName" name="transportationContent"> Transportation</button>

        <button class="alertName" name="libraryContent">Library</button>

      </div>
    </section>
  </div>
  <br/>
  <div class="map">
    <section class="hidingsection">

      <div class="hide schoolContent">

        <img src="https://res.cloudinary.com/dnu8yyawg/image/upload/v1559077188/elke/schools_pyqexw.png" />

      </div>
      <div class="hide recreationContent">
        <img src="https://res.cloudinary.com/dnu8yyawg/image/upload/v1559077189/elke/recreation_psbfyp.png" />

      </div>

      <div class="hide restaurantsContent">

        <img src="https://res.cloudinary.com/dnu8yyawg/image/upload/v1559077188/elke/restaurants_xjbtbd.png" />

      </div>

      <div class="hide banksContent">

        <img src="https://res.cloudinary.com/dnu8yyawg/image/upload/v1559077188/elke/banks_zohw39.png" />

      </div>

      <div class="hide groceriesContent">

        <img src="https://res.cloudinary.com/dnu8yyawg/image/upload/v1559077188/elke/groceries_xjaddd.png" />

      </div>

      <div class="hide transportationContent">

        <img src="https://res.cloudinary.com/dnu8yyawg/image/upload/v1559077188/elke/transportation_mzzclu.png" />

      </div>

      <div class="hide libraryContent">

        <img src="https://res.cloudinary.com/dnu8yyawg/image/upload/v1559077188/elke/library_pbesf1.png" />

      </div>

    </section>
  </div>

Answer 2

在CSS样式的最顶部，您拥有的位置：

.hide {
  z-index: 2;
  display: none;
}

删除显示：无；所以你剩下：

.hide {
  z-index: 2;
}

div的背景图片未显示

2 个答案: