1

我确定我在这里遗漏了一些简单的东西：我正在创建一个具有不同图像叠加层的地图。我得到了地图，但在您按下按钮之前地图不会显示。我需要它总是出现。目前地图被设置为背景图像。如果我将其设置为图像，则所有按钮都不起作用。有谁知道我错过了什么？

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>

4

2 回答 2

3

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

向该部分添加大小，您将看到 bg 图像

IE

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

于 2019-05-30T23:07:31.357 回答
1

在 CSS 样式的最顶部，您可以在其中：

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

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

.hide {
  z-index: 2;
}
于 2019-05-30T23:10:25.433 回答