Question

确定。我遇到了一个简单的Jquery事件，在点击时，它会在各自的DIV上的IFRAME上加载一个Page。
JS Fiddle here

现在，我真正想要实现的是，

而不是使用＃frame1，＃frame2对它们进行分类的两个单独的代码，我需要它使用相同的代码加载事件

showIframe = function (url) { document.getElementById('iframetarget').src = url; document.getElementById('frame').style.display = 'block'; }
点击列表样式中的 1 ，加载相应的iframe页面，现在点击liststyle上的 2 ， 2的相应iframe页面加载并且 1 上加载的页面将消失（或被杀死，lol）

Desired Fiddle Demo

我知道它不可能在Div中使用相同的Id，所以我尝试使用document.getElementByClassName语法，但它不起作用。
任何帮助请。

Answer 1

希望小提琴这个作品！我在这里使用getelementbyClassName属性..

HTML代码遵循：

<ul>
<li><a href="#frame" onclick="showIframe('http://www.uibrush.com/');">1</a></li>
<li><a href="#frame" onclick="showIframe('http://imgur.com/');">&nbsp;2</a></li>
</ul>  

<div id="frame" style="background-color:#9C27B0">
<iframe id='iframetarget' class="full" frameborder="0" src=""></iframe>
</div>

Javascript关注：

showIframe = function (url) {

    var divs = document.getElementsByClassName('full');
for(var i=0; i < divs.length; i++) { 
  divs[i].src = url;
}

    //document.getElementByClassName('full').src = url;
    document.getElementById('frame').style.display = 'block';
}

Css如下：

ul{list-style:none;position: fixed;margin:0;padding:0;}
ul li{float:left}
a{text-decoration:none}

.full {width:100%; height:100%;}

Answer 2

试试这个jsFiddle。两个iframe通过data-url值

连接到链接

var btns = document.getElementsByClassName('iframe-btn');
for( var i=0;i<btns.length;i++){
    btns[i].addEventListener("click", function(e){
        e.preventDefault();
        var url = this.getAttribute('data-url');
        var target = this.getAttribute('href').split('#')[1];

        var iframes = document.getElementsByTagName('iframe');
        for( var j=0;j<btns.length;j++){
            iframes[j].src='';
        }
        document.getElementById(target).src = url;
        document.getElementById(target).style.display = 'block'; 
    }, false);
}

Answer 3

使用jquery代码试试这个

HTML

<ul>
<li><a href="#frame1" onclick="showIframe('http://www.uibrush.com/');">1</a></li>
<li><a href="#frame2" onclick="showIframe2('http://imgur.com/');">&nbsp;2</a></li>
</ul>
<br><br>


<div id="frame1" style="background-color:#9C27B0">
<iframe id='iframetarget1' class="full" frameborder="0" src=""></iframe>
</div>
<br>


<div id="frame2" style="background-color:#ffd800">
<iframe id='iframetarget2' class="full" frameborder="0" src=""></iframe>
</div>

的Javascript

$("#link1").click(showIframe);
$("#link2").click(showIframe);

function showIframe() {
   var target ='#'+ $(this).attr('data-target');
   var url = $(this).attr('data-url');
   $(target).attr('src',url);  
   $(target).parent().css("display:'block'");
}

https://jsfiddle.net/q8co5tpe/

Answer 4

您应该通过代码添加事件监听器，例如

$（'＃element'）。on（'click'，function（）{// logic}）;
每个事件都将一个对象传递给处理程序，该处理程序包含执行程序。您可以为执行程序提供一些包含URL或其他内容的data- *属性。

这里有一些参考文献：

在Click事件上加载页面

4 个答案: