我在一个页面中有3个按钮图像,这样当您按1时,它应显示与其相关的iFrame,并隐藏其他图像。我刚刚开始学习webdev,我已经在网上浏览了,但我似乎无法使其成功。 :○
这是我的代码:
<div id="tabs">
<div id="overview">
<a href="#wrapper">Overviews</a>
</div>
<div id="gallery">
<a href="#wrapper2">Gallery</a>
</div>
</span>
<div id="reviews">
<a href="#wrapper3">Reviews</a>
</div>
</div>
每个包装器#是包含iFrame的div的id。上面选项卡div中包含的div是按钮图像。
如何显示1帧第1帧,然后点击其他按钮图像时,iFrame将隐藏,与点击按钮对应的iFrame将是唯一显示的?
提前非常感谢!! :)
P.S。你可以查看我的网站www.giroapps.com,以更好地了解我正在努力实现的目标。 :)
答案 0 :(得分:1)
有一个很好的解决方案:http://www.stilbuero.de/jquery/tabs_3/
快速举例:
<head>
<link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.tabs.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#tabs").tabs();
});
</script>
</head>
<body>
<div id="tabs">
<ul>
<li><a href="#fragment-1"><span>One</span></a></li>
<li><a href="#fragment-2"><span>Two</span></a></li>
<li><a href="#fragment-3"><span>Three</span></a></li>
</ul>
<div id="fragment-1">
<iframe>IFrame1</iframe>
</div>
<div id="fragment-2">
<iframe>IFrame2</iframe>
</div>
<div id="fragment-3">
<iframe>IFrame3</iframe>
</div>
</div>
</body>
关于你的申请:
<SCRIPT type="text/javascript">
$(document).ready(function(){
$("#tabs a").click( function() {
$("#tabs-1").load(this.href);
return false ;
} ) ;
$("#tabs a:first").click() ;
});
</SCRIPT>
<DIV id="tabs">
<DIV id="overview">
<A class="imagelink lookA" href="./toframe.html">Overviews</A>
</DIV>
<DIV id="gallery">
<A class="imagelink lookA" href="./tawagpinoygallery.html">Gallery</A>
</DIV>
<DIV id="reviews">
<A class="imagelink lookA" href="./trframe.html">Reviews</A>
</DIV>
</DIV>
<div id="tabs-1"></div>