Question

我创建了一个sharepoint webpart。在这个webpart中，我生成了一些HTML。在这个html中我有一个ID为ID＆＃34; Div1＆＃34;有一些信息。在这个div下面我有一个最初隐藏的iframe。最后我有2个超链接，其目标是iframe。如何制作我的html如下：

当我点击超链接时，iframe将可见
当我点击超链接时，ID为＃34; Div1＆＃34;将被隐藏
当我点击超链接时，iframe将在超链接中加载网址

HTML：

<div id="Div1"> some information </div>
<iframe id="myIframe" name="myIframe" style="display:none;" />
<a href="http://www.google.com" target="myIframe">Google</a><br/>
<a href="http://www.yahoo.com" target="myIframe">Yahoo</a>

也许在jQuery中？

Answer 1

此代码说：

＆＃34;当我点击超链接（<a>标签）时：

一个。显示ID为＃34; myIframe＆＃34;
的元素
湾隐藏ID为＃34; Div1＆＃34;。

使用超链接标记的target属性将正确定位iFrame。

$('a').click(function(){
    $('#myIframe').show();
    $('#Div1').hide();
});

http://jsfiddle.net/daveSalomon/tLu5w7b2/

但是，如果您只需要这样做，那么加载整个库就太过分了。使用vanilla JS可以获得相同的结果......

var lnks = document.getElementsByTagName("a");
    for(var i=0; i<lnks.length; ++i){
        lnks[i].onclick = function(){
        document.getElementById('myIframe').style.display = 'block';
        document.getElementById('Div1').style.display = 'none';
    };
}

http://jsfiddle.net/daveSalomon/tLu5w7b2/1/

单击在iframe中打开页面的超链接后隐藏div？

1 个答案: