Question

我有一个包含2个不同部分的网页。每个都是视口的高度。一个在中间有一个按钮“工作”。单击此按钮后，该链接消失，并且某些链接显示在原位置。下一节同样适用。

我正在尝试添加一个重置功能，以删除链接并向后添加按钮。我最初试图使所有部分复位为一个按钮，但是在此之后不起作用了，现在我试图为每个部分设置一个单独的按钮。

我已经做到了，但是我的问题是第二部分的重置按钮与第一部分的重置按钮出现在同一位置。两者都应显示在其相应部分的右下部分。

function openSites(categoryType) {
  if (categoryType == "work") {
    var sites = document.getElementById("workSites");
    var button = document.getElementById("workButton");
  } else if (categoryType == "other") {
    var sites = document.getElementById("otherSites");
    var button = document.getElementById("otherButton");
  }
  sites.classList.add("show");
  sites.classList.remove("hide");
  button.classList.add("hide");
}

function reset(categoryType) {
  if (categoryType == "work") {
    var sites = document.getElementById("workSites");
    var button = document.getElementById("workButton");
  } else if (categoryType == "other") {
    var sites = document.getElementById("otherSites");
    var button = document.getElementById("otherButton");
  }
  sites.classList.remove("show");
  sites.classList.add("hide");
  button.classList.remove("hide");
}

function betterReset() {
  for (category in document.getElementsByClassName("category-container")) {
    document.write(category);
  }
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.page {
  display: inline-block;
  overflow: hidden;
  width: 100%;
  height: 100vh;
}

#page-1 {
  display: block;
  background-color: #3faae4;
}

#page-2 {
  display: block;
  background-color: #ffffff;
}

.pointer {
  cursor: pointer;
}

#work {
  height: 100%;
  width: 100%;
}

#other {
  height: 100%;
  width: 100%;
}

#workSites {
  height: 100%;
  width: 100%;
}

#otherSites {
  height: 100%;
  width: 100%;
}

.sites {
  list-style-type: none;
  height: 100%;
}

.site {
  padding: 50px 0px;
  flex-grow: 1;
  text-align: center;
}

.center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.category-container {
  height: 100%;
}

.category-button {
  border: solid 0.5px;
  padding: 60px;
}

.buttonClose {
  position: absolute;
  border: solid 0.5px;
  border-radius: 5px;
  right: 3px;
  bottom: 0px;
  width: 70px;
  height: 35px;
}

.show {
  display: block;
}

.hide {
  display: none;
}

<!DOCTYPE html>
<html>
<head>
  <title>Nick's site</title>
  <link rel="stylesheet" type="text/css" href="./styles3.css">
  <meta name="viewport" content="width= device-width, inital-scale=1">
</head>
<body>
  <div id="page-1" class="page">
    <div id="work">
      <div id="workButton" class="category-container center">
        <a class="category-button pointer" onclick="openSites('work')">Work</a>
      </div>
      <div id="workSites" class="hide">
        <ul class="sites center">
          <li class="site"><a class="pointer" href="#">Printfactory</a></li>
          <li class="site"><a class="pointer" href="#">Henry's Site</a></li>
        </ul>
        <button onclick="reset('work')" class="buttonClose pointer" style="z-index: 2;">
         Reset
       </button>
      </div>
    </div>
  </div>
  <div id="page-2" class="page">
    <div id="other">
      <div id="otherButton" class="category-container center">
        <a class="category-button pointer" onclick="openSites('other')">Other</a>
      </div>
      <div id="otherSites" class="hide">
        <ul class="sites center">
          <li class="site"><a class="pointer" href="#">#</a></li>
          <li class="site"><a class="pointer" href="#">#</a></li>
          <li class="site"><a class="pointer" href="#">#</a></li>
        </ul>
        <button onclick="reset('other')" class="buttonClose pointer" style="z-index: 2;">
          Reset2
        </button>
      </div>
    </div>
  </div>
</body>
</html>

Answer 1

您要给private void Delete_Commands(object sender, RoutedEventArgs e) { foreach (CommandGridItems item in CommandRows2.ItemsSource) { if (item.Delete) { // use parameter for id here !!! ServerDB.ExecuteDB("DELETE FROM commands where id = " + item.Command_ID); } } PopulateDataGrid(); }的重置按钮。这使它们相对于position:absolute的下一个父级采用right和bottom的值。在这种情况下为position:relative标记。

要解决此问题，请将body添加到您的父div。

position:relative

希望这会有所帮助：>

#workSites,
#otherSites {
  position: relative;
}

function openSites(categoryType) {
                if (categoryType == "work") {
                    var sites = document.getElementById("workSites");
                    var button = document.getElementById("workButton");
                } else if (categoryType == "other") {
                    var sites = document.getElementById("otherSites");
                    var button = document.getElementById("otherButton");
                }
                sites.classList.add("show");
                sites.classList.remove("hide");
                button.classList.add("hide");

            }
            function reset(categoryType) {
                if (categoryType == "work") {
                    var sites = document.getElementById("workSites");
                    var button = document.getElementById("workButton");
                } else if (categoryType == "other") {
                    var sites = document.getElementById("otherSites");
                    var button = document.getElementById("otherButton");
                }
                sites.classList.remove("show");
                sites.classList.add("hide");
                button.classList.remove("hide");
            }
            function betterReset() {
                for (category in document.getElementsByClassName("category-container")){
                    document.write(category);
                }
            }

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.page {
    display: inline-block;
    overflow: hidden;
    width: 100%;
    height: 100vh;
}
#page-1 {
    display: block;
    background-color: #3faae4;
}
#page-2 {
    display: block;
    background-color: #ffffff;
}
.pointer {
    cursor: pointer;
}
#work {
    height: 100%;
    width: 100%;
}
#other {
    height: 100%;
    width: 100%;
}
#workSites {
    height: 100%;
    width: 100%;
}
#otherSites {
    height: 100%;
    width: 100%;
}
.sites {
    list-style-type: none;
    height: 100%;
}
.site {
    padding: 50px 0px;
    flex-grow: 1;
    text-align: center;
}
.center {
    display: flex;
    align-items: center;
    justify-content: center;
}
.category-container {
    height: 100%;
}
.category-button {
    border: solid 0.5px;
    padding: 60px;
}
.buttonClose {
    position: absolute;
    border: solid 0.5px;
    border-radius: 5px;
    right: 3px;
    bottom: 0px;
    width: 70px;
    height: 35px;
}
.show {
    display: block;
}
.hide {
    display: none;
}

#workSites,
#otherSites {
  position: relative;
}

将按钮完全错误地放置在应该放置的位置

1 个答案: