Question

我发布了尚未完成的网站只是为了向您展示我想要的内容

在本网站： http://urbanphenomena.net/shukri/#page3

当用户点击特定链接时，iFrame会重定向到不同页面中的不同图像。如果需要，这是代码：

＆＃13;

<!--- Projects Section --->
    <div class="section projects-section container-fluid" id="section4">
      <div class="row">
        <div class="col-lg-2 pull-left">
          <div class="panel-group" id="accordion">
            <div class="panel">
              <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">Architecture</a>
              </h4>
              <div id="collapse1" class="panel-collapse collapse in">
                <div class="panel-body">
                  <!--- FAF --->
                  <div>
                    <a class="collapsed" data-toggle="collapse" href="#collapseOne">
                      <h5>FAF</h5>
                    </a>
                  </div>
                  <div id="collapseOne" class="panel-collapse collapse in">
                    <ol>
                      <button type="button" onclick="setURL('imgs/projects/ARCH/A01-FAF/1.html')">A01-FAF-1</button><br>
                        
                      <button type="button" onclick="setURL('imgs/projects/ARCH/A01-FAF/2.html')">A01-FAF-2</button><br>
                        
                      <button type="button" onclick="setURL('imgs/projects/ARCH/A01-FAF/3.html')">A01-FAF-3</button><br>
                        
                      <button type="button" onclick="setURL('imgs/projects/ARCH/A01-FAF/4.html')">A01-FAF-4</button><br>
                        
                      <button type="button" onclick="setURL('imgs/projects/ARCH/A01-FAF/5.html')">A01-FAF-5</button><br>
                    </ol>
                  </div>
                  <!--- KSAF --->
                  <div>
                    <a class="collapsed" data-toggle="collapse" href="#collapseTwo">
                      <h5>KSAF</h5>
                    </a>
                  </div>
                  <div id="collapseTwo" class="collapse">
                    <ol>
                      <button type="button" onclick="setURL('imgs/projects/ARCH/A02-KSAF/1.html')">A02-KSAF-1</button><br>
                    
                      <button type="button" onclick="setURL('imgs/projects/ARCH/A02-KSAF/2.html')">A02-KSAF-2</button><br>
                    </ol>
                  </div>
                  <!--- KSAF10V --->
                  <div>
                    <a class="collapsed" data-toggle="collapse" href="#collapseThree">
                      <h5>KSAF10V</h5>
                    </a>
                  </div>
                  <div id="collapseThree" class="collapse">
                    <ol>
                      <button type="button" onclick="setURL('imgs/projects/ARCH/A03-KSAF10V/1.html')">A03-KSAF10V-1</button><br>
                        
                      <button type="button" onclick="setURL('imgs/projects/ARCH/A03-KSAF10V/2.html')">A03-KSAF10V-2</button><br>
                        
                      <button type="button" onclick="setURL('imgs/projects/ARCH/A03-KSAF10V/3.html')">A03-KSAF10V-3</button><br>
                        
                      <button type="button" onclick="setURL('imgs/projects/ARCH/A03-KSAF10V/4.html')">A03-KSAF10V-4</button><br>
                    </ol>
                  </div>
                  <!--- Makkah --->
                  <div>
                    <a class="collapsed" data-toggle="collapse" href="#collapseFour">
                      <h5>Makkah</h5>
                    </a>
                  </div>
                  <div id="collapseFour" class="collapse">
                    <ol>
                      <button type="button" onclick="setURL('imgs/projects/ARCH/A04-Makkah/1.html')">A03-Makkah-1</button><br>
                        
                      <button type="button" onclick="setURL('imgs/projects/ARCH/A04-Makkah/2.html')">A03-Makkah-2</button><br>
                        
                      <button type="button" onclick="setURL('imgs/projects/ARCH/A04-Makkah/3.html')">A03-Makkah-3</button><br>
                    </ol>
                  </div>
                  <!--- Marina --->
                  <div>
                    <a class="collapsed" data-toggle="collapse" href="#collapseFive">
                      <h5>Marina</h5>
                    </a>
                  </div>
                  <div id="collapseFive" class="collapse">
                    <ol>
                      <button type="button" onclick="setURL('imgs/projects/ARCH/A05-Marina/1.html')">A05-Marina-1</button><br>
                        
                      <button type="button" onclick="setURL('imgs/projects/ARCH/A05-Marina/2.html')">A05-Marina-2</button><br>
                        
                      <button type="button" onclick="setURL('imgs/projects/ARCH/A05-Marina/3.html')">A05-Marina-3</button><br>
                    </ol>
                  </div>
                  <!--- Residential --->
                  <div>
                    <a class="collapsed" data-toggle="collapse" href="#collapseSix">
                      <h5>Residential</h5>
                    </a>
                  </div>
                  <div id="collapseSix" class="collapse">
                    <ol>
                      <button type="button" onclick="setURL('imgs/projects/ARCH/A06-Residential/1.html')">A06-Residential-1</button><br>
                        
                      <button type="button" onclick="setURL('imgs/projects/ARCH/A06-Residential/2.html')">A06-Residential-2</button><br>
                        
                      <button type="button" onclick="setURL('imgs/projects/ARCH/A06-Residential/3.html')">A06-Residential-3</button><br>
                        
                      <button type="button" onclick="setURL('imgs/projects/ARCH/A06-Residential/4.html')">A06-Residential-4</button><br>
                        
                      <button type="button" onclick="setURL('imgs/projects/ARCH/A06-Residential/5.html')">A06-Residential-5</button><br>
                        
                      <button type="button" onclick="setURL('imgs/projects/ARCH/A06-Residential/6.html')">A06-Residential-6</button><br>
                        
                      <button type="button" onclick="setURL('imgs/projects/ARCH/A06-Residential/7.html')">A06-Residential-7</button><br>
                        
                      <button type="button" onclick="setURL('imgs/projects/ARCH/A06-Residential/8.html')">A06-Residential-8</button><br>
                        
                      <button type="button" onclick="setURL('imgs/projects/ARCH/A06-Residential/9.html')">A06-Residential-9</button><br>
                        
                      <button type="button" onclick="setURL('imgs/projects/ARCH/A06-Residential/10.html')">A06-Residential-10</button><br>
                    </ol>
                  </div>
                  <!--- SAB4 --->
                  <div>
                    <a class="collapsed" data-toggle="collapse" href="#collapseSeven">
                      <h5>SAB4</h5>
                    </a>
                  </div>
                  <div id="collapseSeven" class="collapse">
                    <ol>
                      buttona type="button" onclick="setURL('imgs/projects/ARCH/A07-SAB4/1.html')">A07-SAB4-1</button><br>
                      
                      <button type="button" onclick="setURL('imgs/projects/ARCH/A07-SAB4/2.html')">A07-SAB4-2</button><br>
                      
                      <button type="button" onclick="setURL('imgs/projects/ARCH/A07-SAB4/3.html')">A07-SAB4-3</button><br>
                      
                      <button type="button" onclick="setURL('imgs/projects/ARCH/A07-SAB4/4.html')">A07-SAB4-4</button><br>
                    </ol>
                  </div>
                </div>
              </div>
            </div>
            <div class="panel">
              <h4>
                <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Interior</a>
              </h4>
              <div id="collapse2" class="panel-collapse collapse">
                <div class="panel-body">
                  <div id="collapse2" class="collapse in" aria-labelledby="heading2">
                    <ol>
                      <button type="button" onclick="setURL('imgs/projects/INT/I01-Interior/1.html')">I01-Interior-1</button><br>
                        
                      <button type="button" onclick="setURL('imgs/projects/INT/I01-Interior/2.html')">I01-Interior-2</button><br>
                        
                      <button type="button" onclick="setURL('imgs/projects/INT/I01-Interior/3.html')">I01-Interior-3</button><br>
                        
                      <button type="button" onclick="setURL('imgs/projects/INT/I01-Interior/4.html')">I01-Interior-4</button><br>
                        
                      <button type="button" onclick="setURL('imgs/projects/INT/I01-Interior/5.html')">I01-Interior-5</button><br>
                        
                      <button type="button" onclick="setURL('imgs/projects/INT/I01-Interior/6.html')">I01-Interior-6</button><br>
                        
                      <button type="button" onclick="setURL('imgs/projects/INT/I01-Interior/7.html')">I01-Interior-7</button><br>
                    </ol>
                  </div>
                  <!--- SFS --->
                  <div>
                    <a class="collapsed" data-toggle="collapse" href="#collapseOneInt">
                      <h5>SFS</h5>
                    </a>
                  </div>
                  <div id="collapseOneInt" class="collapse">
                    <ol>
                      <button type="button" onclick="setURL('imgs/projects/INT/I02-SFS/1.html')">I02-SFS-1</button><br>
                        
                      <button type="button" onclick="setURL('imgs/projects/INT/I02-SFS/2.html')">I02-SFS-2</button><br>
                        
                      <button type="button" onclick="setURL('imgs/projects/INT/I02-SFS/3.html')">I02-SFS-3</button><br>
                        
                      <button type="button" onclick="setURL('imgs/projects/INT/I02-SFS/4.html')">I02-SFS-4</button><br>
                    </ol>
                  </div>
                </div>
              </div>
            </div>
            <div class="panel">
              <h4>
                <a data-toggle="collapse" data-parent="#accordion" href="#collapse3">Fabrication</a>
              </h4>
              <div id="collapse3" class="panel-collapse collapse">
                <div class="panel-body">
                  <div id="collapse3">
                    <ol>
                      <button type="button" onclick="setURL('imgs/projects/FAB/F01-Fabrication/1.html')">F01-Fabrication-1</button><br>
                        
                      <button type="button" onclick="setURL('imgs/projects/FAB/F01-Fabrication/2.html')">F01-Fabrication-2</button><br>
                        
                      <button type="button" onclick="setURL('imgs/projects/FAB/F01-Fabrication/3.html')">F01-Fabrication-3</button><br>
                        
                      <a type="button" onclick="setURL('imgs/projects/FAB/F01-Fabrication/4.html')">F01-Fbuttonbrication-4</button><br>
                        
                      <button type="button" onclick="setURL('imgs/projects/FAB/F01-Fabrication/5.html')">F01-Fabrication-5</button><br>
                    </ol>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!--- iFrame --->
        <div class="col-lg-7
          col-md-7
          col-sm-12
          col-xs-12 pull-right
          col-lg-pull-3 img-container
          col-md-pull-3">
          <iframe id="iframe" src="imgs/projects/ARCH/A01-FAF/1.html" allowfullscreen></iframe>
        </div>
        <script>
          function setURL(url) {
            document.getElementById('iframe').src = url;
          }
        </script>
      </div>
    </div>

＆＃13;

有比iframe更准确的方法吗？

我需要帮助的主要是：当我重新加载页面时，我希望在重新加载后突出显示其中一个按钮。

与bootstrap中的类.active一样，当您第一次重新加载页面时，<li>已经突出显示而没有单击它，这就是我想要的第一个按钮，即＆＃34; A01- FAF-1＆＃34 ;.但是课程active无效。

怎么做？

Answer 1

这是一个非常简单的例子：

<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"
    type="text/javascript">
</script>
<script type="text/javascript">
      function showHer(){
        $("#TestDiv").html("Something");
      }
</script>
</head>
<body>
<div id="TestDiv" style="width:100px;height:100px;border:1px solid black">
Changeable stuff here.
</div>
<div onclick="showHer()" style="background:silver;border:1px solid black;cursor:pointer;display:inline;">
click me
</div>
</body>
</html>

您可以在一行中看到我能够在页面的其他位置更改DIV的内容。

另请注意，没有按钮。你可以用按钮，图像，链接，几乎任何东西来做到这一点。

另外需要注意的一点是，由于您使用jquery替换页面的一个小区域中的内容，因此整个页面不需要更新（更快）并且按下BACK不会。回到上一张图片，它会回到上一页。

做某事的另一种方式

1 个答案: