jquery - 点击事件加载页面

Question

好的。我遇到了一个简单的 Jquery 事件，点击它会在其各自的 DIV 上的 IFRAME 上加载一个页面。
JS Fiddle here

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

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

   showIframe = function (url) { document.getElementById('iframetarget').src = url; document.getElementById('frame').style.display = 'block'; }

2. 点击列表样式中的1，相应的iframe页面加载，现在点击列表样式中的2，2相应的iframe页面 加载并且在 1 上加载的页面将消失(或被杀死，哈哈)

Desired Fiddle Demo

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

Answer 1

试试这个 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);
}