Question

在此之前，我要感谢所有花时间阅读本文的人。

经过几年没有编码，我需要＆＃34;制作网页。一切都顺利而精细，直到这个要求出现：
在一个页面中，我想要一个侧面菜单，当点击每个选项时，它会在右侧显示一些内容，但没有＆＃34; loading＆＃34;另一个页面（这将是更简单的方法，只需为每个＆＃34;选项＆＃34;制作一个页面，然后只需单击每个按钮就会引导我进入右侧内容的页面。

由于我极端生锈，我用Google搜索并发现了这个：

<script type="text/javascript">
function toggle(IDS) {
  var sel = document.getElementById('pg').getElementsByTagName('div');
  for (var i=0; i<sel.length; i++) { 
    if (sel[i].id != IDS) { sel[i].style.display = 'none'; }
  }
  var status = document.getElementById(IDS).style.display;
  if (status == 'block') { document.getElementById(IDS).style.display = 'none'; }
                    else { document.getElementById(IDS).style.display = 'block'; }
  return false;
}
</script>

这很有效。然后我将其添加到侧边菜单中，当点击每个部分时，它会显示我想要显示的内容：

<div id="sidebar2">
                <div>
                    <h2 class="title">TEXT</h2>
                    <ul>
                          <li><a href="#" onclick="return toggle('pg0')">TEXT</a></li>
                          <li><a href="#" onclick="return toggle('pg1')">TEXT2</a></li>
                    </ul>
                </div>
                <div>


And in the content of each "option":

 <div id="pg">
  <div id="pg0" class="pg"> 
                        <h2 class="title">TEXT</h2>
                        <p><img src="images/test.png" alt=""/></p>
                        </div>

  <div id="pg1" class="pg">  
                        <h2 class="title">TEXT2</h2>
                        <p><img src="images/test2.png" alt=""/>HERE GOES THE DIV POPUP BUTTON</p>
                        </div>

当我想添加一个＆＃34;按钮时，问题出现了。里面的一个内容。我想要一个单击按钮，打开一个弹出图像。我已经使用了几个代码，但看起来这个脚本＆＃34;功能切换＆＃34;设置每个div内的所有内容以显示＆＃34; none＆＃34;当我点击时，只有更改才能阻止＆＃34;外部部分＆＃34; ....但如果我有一个内部div，它仍然是隐藏的。我已经尝试了这两个代码用于弹出窗口：

<div id="test">
<a href="#" class="JesterBox">
  <div id="image1"><img src="bg.jpg"></div>
  </a>

<a href="#image1">Image 1</a>

在css中使用相应的jesterbox定义：

.JesterBox div {

  visibility: hidden;
  position: fixed;
  top: 5%;
  right: 5%;
  bottom: 5%;
  left: 5%;
  z-index: 75;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.JesterBox div:before {
  content: '';
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 74;
  background-color: rgba(0, 0, 0, 0);
  transition: all 0.5s ease-out;
}

.JesterBox div img {
  position: relative;
  z-index: 77;
  max-width: 100%;
  max-height: 100%;
  margin-left: -9999px;
  opacity: 0;
  transition-property: all, opacity;
  transition-duration: 0.5s, 0.2s;
  transition-timing-function: ease-in-out, ease-out;
}

.JesterBox div:target { visibility: visible; }

.JesterBox div:target:before { background-color: rgba(0, 0, 0, 0.7); }

.JesterBox div:target img {
  margin-left: 0px;
  opacity: 1;
}

另一个：

<div class="box">
    <a class="button" href="#popup1">TEXT</a>
</div>

<div id="popup1" class="overlay">
    <div class="popup">
        <h2>Title</h2>
        <a class="close" href="#">&times;</a>
        <div class="content">
            TEXT TEXT
        </div>
    </div>
</div>

用他对应的css：

.box {
  width: 20%;
  margin: 0 auto;
  background: rgba(255,255,255,0.2);
  padding: 35px;
  border: 2px solid #fff;
  border-radius: 20px/50px;
  background-clip: padding-box;
  text-align: center;
}

.button {
  font-size: 1em;
  padding: 10px;
  color: #fff;
  border: 2px solid #06D85F;
  border-radius: 20px/50px;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease-out;
}
.button:hover {
  background: #06D85F;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  transition: opacity 500ms;
  visibility: hidden;
  opacity: 0;
}
.overlay:target {
  visibility: visible;
  opacity: 1;
}

.popup {
  margin: 70px auto;
  padding: 20px;
  background: #fff;
  border-radius: 5px;
  width: 30%;
  position: relative;
  transition: all 5s ease-in-out;
}

.popup h2 {
  margin-top: 0;
  color: #333;
  font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
  position: absolute;
  top: 20px;
  right: 30px;
  transition: all 200ms;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  color: #333;
}
.popup .close:hover {
  color: #06D85F;
}
.popup .content {
  max-height: 30%;
  overflow: auto;
}

@media screen and (max-width: 700px){
  .box{
    width: 70%;
  }
  .popup{
    width: 70%;
  }
}

我已经尝试过google搜索pg中显示div的几种方法，但我无法使其正常工作。

所以问题是，我怎么能做，例如，第二个选项（div class =＆＃34; box＆＃34;）在div pg内工作

此

<div id="pg1" class="pg">  
                            <h2 class="title">TEXT2</h2>
                            <p>
<div class="box">
        <a class="button" href="#popup1">TEXT</a>
    </div>

    <div id="popup1" class="overlay">
        <div class="popup">
            <h2>Title</h2>
            <a class="close" href="#">&times;</a>
            <div class="content">
                TEXT TEXT
            </div>
        </div>
    </div>

功能切换不会在＆＃34;切换＆＃34;内显示div。格

0 个答案: