如何从链接中隐藏和显示另一个iframe

how to hide and show another iframe from link

本文关键字：显示 另一个 iframe 隐藏 链接      更新时间：2023-09-26

<div class="category-tab" id="navg"><!--category-tab-->
<div class="col-sm-15">
<ul class="nav nav-tabs">	
							
			<li class="active" ><a href="link"  data-toggle="tab">name</a></li>
			<li ><a href="#link" data-toggle="tab">name</a></li>							    <li ><a href="#link" data-toggle="tab">name</a</li>
			<li ><a href="#link" data-toggle="tab">name</a></li>
</ul>
</div>	
</div>
</div>
<iframe src="" id="a" height="2000" width="1366" frameborder="0" align="right" scrolling="no" ></iframe>
<iframe src="" id="b" height="2000" width="1366" frameborder="0" align="right" scrolling="no" ></iframe>

我想要的是当点击链接时在li标签

  • 中，它切换iframe或以任何方式显示和隐藏，只是我可以让iframe与上方的链接连接的想法

  • 当我点击链接时，它变为活动的，iframe连接到它，而不是加载其他

    • 要"切换iframe以显示或隐藏"，可以使用jQuery的toggle函数。然后你可以写例如：

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<a href="#link" onclick="$('iframe#a').toggle()">I'm a toggle-link.</a><br />
<a href="#link" onclick="$('iframe#b').toggle()">I'm another toggle-link.</a><br />
<iframe id="a" src="http://stackoverflow.com"></iframe><br />
<iframe id="b" src="http://www.wikipedia.org"></iframe>

    通过使用.thoggle((，您基本上只是将iframe的display属性设置为block/noe

    编辑：
    似乎您希望同时只显示一个iframe
    然后，一旦用户点击链接，你就可以隐藏所有的iframe，只显示相应的：

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<a href="#link" onclick="$('iframe').hide();$('iframe#a').show();">I'm a toggle-link (Stack Overflow).</a><br />
<a href="#link" onclick="$('iframe').hide();$('iframe#b').show();">I'm another toggle-link (Wikipedia).</a><br />
<a href="#link" onclick="$('iframe').hide();$('iframe#c').show();">And another toggle-link (jQuery).</a><br />
<iframe id="a" src="http://stackoverflow.com"></iframe>
<iframe id="b" src="http://www.wikipedia.org" style="display:none"></iframe>
<iframe id="c" src="http://jquery.com" style="display:none"></iframe>

    不要忘记从一开始就隐藏那些你不想显示的iframe，例如在它们上面加上style="display:none"。

    相关文章：