做某事的另一种方式 [英] Alternative way to do something
本文介绍了做某事的另一种方式的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我发布了尚未完成的网站只是为了向您展示我想要的东西
在这个网站上：
http://urbanphenomena.net/shukri/#page3
iFrame正在重定向在用户点击特定链接时在不同页面中显示不同的图像。如果需要，这是代码：
<！--- Projects Section ---> < div class =section projects-section container-fluidid =section4> < div class =row> < div class =col-lg-2 pull-left> < div class =panel-groupid =accordion> < div class =panel> < h4 class =panel-title> < a data-toggle =collapsedata-parent =＃accordionhref =＃collapse1>架构< / a> < / H4> < div id =collapse1class =panel-collapse collapse in> < div class =panel-body> <！--- FAF ---> < DIV> < a class =collapseddata-toggle =collapsehref =＃collapseOne> < H5> FAF< / H5> < / A> < / DIV> < div id =collapseOneclass =panel-collapse collapse in> <醇> < button type =buttononclick =setURL（'imgs / projects / ARCH / A01-FAF / 1.html'）> A01-FAF-1< / button>< br> < button type =buttononclick =setURL（'imgs / projects / ARCH / A01-FAF / 2.html'）> A01-FAF-2< / button>< br> < button type =buttononclick =setURL（'imgs / projects / ARCH / A01-FAF / 3.html'）> A01-FAF-3< / button>< br> < button type =buttononclick =setURL（'imgs / projects / ARCH / A01-FAF / 4.html'）> A01-FAF-4< / button>< br> < button type =buttononclick =setURL（'imgs / projects / ARCH / A01-FAF / 5.html'）> A01-FAF-5< / button>< br> < /醇> < / DIV> <！--- KSAF ---> < DIV> < a class =collapseddata-toggle =collapsehref =＃collapseTwo> < H5> KSAF< / H5> < / A> < / DIV> < div id =collapseTwoclass =collapse> <醇> < button type =buttononclick =setURL（'imgs / projects / ARCH / A02-KSAF / 1.html'）> A02-KSAF-1< / button>< br> < button type =buttononclick =setURL（'imgs / projects / ARCH / A02-KSAF / 2.html'）> A02-KSAF-2< / button>< br> < /醇> < / DIV> <！--- KSAF10V ---> < DIV> < a class =collapseddata-toggle =collapsehref =＃collapseThree> < H5> KSAF10V< / H5> < / A> < / DIV> < div id =collapseThreeclass =collapse> <醇> < button type =buttononclick =setURL（'imgs / projects / ARCH / A03-KSAF10V / 1.html'）> A03-KSAF10V-1< / button>< br> < button type =buttononclick =setURL（'imgs / projects / ARCH / A03-KSAF10V / 2.html'）> A03-KSAF10V-2< / button>< br> < button type =buttononclick =setURL（'imgs / projects / ARCH / A03-KSAF10V / 3.html'）> A03-KSAF10V-3< / button>< br> < button type =buttononclick =setURL（'imgs / projects / ARCH / A03-KSAF10V / 4.html'）> A03-KSAF10V-4< / button>< br> < /醇> < / DIV> <！--- Makkah ---> < DIV> < a class =collapseddata-toggle =collapsehref =＃collapseFour> < H5>麦加< / H5> < / A> < / DIV> < div id =collapseFourclass =collapse> <醇> < button type =buttononclick =setURL（'imgs / projects / ARCH / A04-Makkah / 1.html'）> A03-Makkah-1< / button>< br> < button type =buttononclick =setURL（'imgs / projects / ARCH / A04-Makkah / 2.html'）> A03-Makkah-2< / button>< br> < button type =buttononclick =setURL（'imgs / projects / ARCH / A04-Makkah / 3.html'）> A03-Makkah-3< / button>< br> < /醇> < / DIV> <！--- Marina ......> < DIV> < a class =collapseddata-toggle =collapsehref =＃collapseFive> < H5>匡< / H5> < / A> < / DIV> < div id =collapseFiveclass =collapse> <醇> < button type =buttononclick =setURL（'imgs / projects / ARCH / A05-Marina / 1.html'）> A05-Marina-1< / button>< br> < button type =buttononclick =setURL（'imgs / projects / ARCH / A05-Marina / 2.html'）> A05-Marina-2< / button>< br> < button type =buttononclick =setURL（'imgs / projects / ARCH / A05-Marina / 3.html'）> A05-Marina-3< / button>< br> < /醇> < / DIV> <！---住宅---> < DIV> < a class =collapseddata-toggle =collapsehref =＃collapseSix> < H5>住宅及LT; / H5> < / A> < / DIV> < div id =collapseSixclass =collapse> <醇> < button type =buttononclick =setURL（'imgs / projects / ARCH / A06-Residential / 1.html'）> A06-Residential-1< / button>< br> < button type =buttononclick =setURL（'imgs / projects / ARCH / A06-Residential / 2.html'）> A06-Residential-2< / button>< br> < button type =buttononclick =setURL（'imgs / projects / ARCH / A06-Residential / 3.html'）> A06-Residential-3< / button>< br> < button type =buttononclick =setURL（'imgs / projects / ARCH / A06-Residential / 4.html'）> A06-Residential-4< / button>< br> < button type =buttononclick =setURL（'imgs / projects / ARCH / A06-Residential / 5.html'）> A06-Residential-5< / button>< br> < button type =buttononclick =setURL（'imgs / projects / ARCH / A06-Residential / 6.html'）> A06-Residential-6< / button>< br> < button type =buttononclick =setURL（'imgs / projects / ARCH / A06-Residential / 7.html'）> A06-Residential-7< / button>< br> < button type =buttononclick =setURL（'imgs / projects / ARCH / A06-Residential / 8.html'）> A06-Residential-8< / button>< br> < button type =buttononclick =setURL（'imgs / projects / ARCH / A06-Residential / 9.html'）> A06-Residential-9< / button>< br> < button type =buttononclick =setURL（'imgs / projects / ARCH / A06-Residential / 10.html'）> A06-Residential-10< / button>< br> < /醇> < / DIV> <！--- SAB4 ---> < DIV> < a class =collapseddata-toggle =collapsehref =＃collapseSeven> < H5> SAB4< / H5> < / A> < / DIV> < div id =collapseSevenclass =collapse> <醇> buttona type =buttononclick =setURL（'imgs / projects / ARCH / A07-SAB4 / 1.html'）> A07-SAB4-1< / button>< br> < button type =buttononclick =setURL（'imgs / projects / ARCH / A07-SAB4 / 2.html'）> A07-SAB4-2< / button>< br> < button type =buttononclick =setURL（'imgs / projects / ARCH / A07-SAB4 / 3.html'）> A07-SAB4-3< / button>< br> < button type =buttononclick =setURL（'imgs / projects / ARCH / A07-SAB4 / 4.html'）> A07-SAB4-4< / button>< br> < /醇> < / DIV> < / DIV> < / DIV> < / DIV> < div class =panel> < H4> < a data-toggle =collapsedata-parent =＃accordionhref =＃collapse2>内部< / a> < / H4> < div id =collapse2class =panel-collapse collapse> < div class =panel-body> < div id =collapse2class =collapse inaria-labelledby =heading2> <醇> < button type =buttononclick =setURL（'imgs / projects / INT / I01-Interior / 1.html'）> I01-Interior-1< / button>< br> < button type =buttononclick =setURL（'imgs / projects / INT / I01-Interior / 2.html'）> I01-Interior-2< / button>< br> < button type =buttononclick =setURL（'imgs / projects / INT / I01-Interior / 3.html'）> I01-Interior-3< / button>< br> < button type =buttononclick =setURL（'imgs / projects / INT / I01-Interior / 4.html'）> I01-Interior-4< / button>< br> < button type =buttononclick =setURL（'imgs / projects / INT / I01-Interior / 5.html'）> I01-Interior-5< / button>< br> < button type =buttononclick =setURL（'imgs / projects / INT / I01-Interior / 6.html'）> I01-Interior-6< / button>< br> < button type =buttononclick =setURL（'imgs / projects / INT / I01-Interior / 7.html'）> I01-Interior-7< / button>< br> < /醇> < / DIV> <！--- SFS ---> < DIV> < a class =collapseddata-toggle =collapsehref =＃collapseOneInt> < H5> SFS< / H5> < / A> < / DIV> < div id =collapseOneIntclass =collapse> <醇> < button type =buttononclick =setURL（'imgs / projects / INT / I02-SFS / 1.html'）> I02-SFS-1< / button>< br> < button type =buttononclick =setURL（'imgs / projects / INT / I02-SFS / 2.html'）> I02-SFS-2< / button>< br> < button type =buttononclick =setURL（'imgs / projects / INT / I02-SFS / 3.html'）> I02-SFS-3< / button>< br> < button type =buttononclick =setURL（'imgs / projects / INT / I02-SFS / 4.html'）> I02-SFS-4< / button>< br> < /醇> < / DIV> < / DIV> < / DIV> < / DIV> < div class =panel> < H4> < a data-toggle =collapsedata-parent =＃accordionhref =＃collapse3> Fabrication< / a> < / H4> < div id =collapse3class =panel-collapse collapse> < div class =panel-body> < div id =collapse3> <醇> < button type =buttononclick =setURL（'imgs / projects / FAB / F01-Fabrication / 1.html'）> F01-Fabrication-1< / button>< br> < button type =buttononclick =setURL（'imgs / projects / FAB / F01-Fabrication / 2.html'）> F01-Fabrication-2< / button>< br> < button type =buttononclick =setURL（'imgs / projects / FAB / F01-Fabrication / 3.html'）> F01-Fabrication-3< / button>< br> < a type =buttononclick =setURL（'imgs / projects / FAB / F01-Fabrication / 4.html'）> F01-Fbuttonbrication-4< / button>< br> < button type =buttononclick =setURL（'imgs / projects / FAB / F01-Fabrication / 5.html'）> F01-Fabrication-5< / button>< br> < /醇> < / 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 =iframesrc =imgs / projects / ARCH / A01-FAF / 1.htmlallowfullscreen>< / iframe> < / DIV> <脚本>函数setURL（url）{document.getElementById（'iframe'）。src = url; }< / script> < / DIV> < / div>
有更准确的方法吗？这比iframe？
和我需要帮助的东西主要是：
当我重新加载页面时，我希望其中一个按钮突出显示重新加载。
与bootstrap中的类 .active 类似，当您第一次重新加载页面时，< li> 已经突出显示而没有点击它，这就是我想要的第一个按钮，即A01-FAF-1。但是类 active 无效。
如何操作？
解决方案
这是一个非常简单的例子：
< HTML>
< head>
< script src =http://code.jquery.com/jquery-latest.min.js
type =text / javascript>
< / script>
< script type =text / javascript>
函数showHer（）{
$（＃TestDiv）。html（Something）;
}
< / script>
< / head>
< body>
< div id =TestDivstyle =width：100px; height：100px; border：1px solid black>
可变的东西在这里。
< / div>
< div onclick =showHer（）style =background：silver; border：1px solid black; cursor：pointer; display：inline;>
点击我
< / div>
< / body>
< / html>
您可以看到，在一行中，我能够更改DIV中其他位置的内容页面。
另外请注意，没有按钮。你可以用按钮，图像，链接，几乎任何东西来做到这一点。
另外需要注意的是，由于您使用jquery将内容替换为一个小整个页面不需要更新（更快），点击BACK不会回到上一个图像，它会回到上一页。
I published the still not finished website just to show you what I want
In this website: http://urbanphenomena.net/shukri/#page3
the iFrame is redirecting to different images in different pages when the user clicks a specific link. Here is the code if needed:
<!--- 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>
Is there an more accurate way to do this than iframe?
and the thing I need help with mostly is: When I reload the page, I want one of the buttons to be highlighted after the reload.
Like the class .active in bootstrap, when you first reload the page, the <li> is already highlighted without clicking it, thats what I want for the first button which is "A01-FAF-1". But the class active doesn't work.
How to do it?
解决方案
Here is a very simple example:
<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>
You can see, in one line, I was able to change the content of a DIV elsewhere on the page.
Also note that there are no buttons. You can do this with a button, image, link, pretty much anything.
One other thing to note is that since you're using jquery to replace content in one small area of the page, the entire page doesn't need to update (faster) and hitting BACK doesn't just go back to the previous image, it would go back to the previous page.
这篇关于做某事的另一种方式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
