做某事的替代方法答案

【问题标题】：Alternative way to do something做某事的替代方法
【发布时间】：2017-06-15 18:10:38
【问题描述】：

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

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

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

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

有没有比 iframe 更准确的方法？

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

就像引导程序中的 .active 类一样，当您第一次重新加载页面时，<li> 已经突出显示而无需单击它，这就是我想要的第一个按钮“A01-FAF-1”。但是active 类不起作用。

怎么做？

【问题讨论】：

你为什么首先使用iframe而不是img？
我建议你看看jquery。在一些 jquery 语句中执行您的建议非常简单（我相信）。本质上，您可以从另一个源中提取数据（图像/html），并使用生成的拉取填充任何 DIV 或内容就绪标签。你有使用过 jquery 的经验吗？

标签： javascript html twitter-bootstrap iframe

【解决方案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 并不仅仅返回到上一张图片，它会回到上一页。

【讨论】：