找到 Index div 并加载 attr。 iframe 网址答案

【问题标题】：Find Index div and load attr. iframe url找到 Index div 并加载 attr。 iframe 网址
【发布时间】：2012-09-01 09:41:27
【问题描述】：

我有一个菜单列表 (ul/li)，我试图匹配一组特定的 div。例如：如果我单击 li 编号 3，则嵌套在 div 3 中的 iframe 必须“显示”并加载特定的 url：

$('document').ready(function(){

$('ul li').one('click', function(event) {

    event.preventDefault();

    var index = $('ul li').index(this);


    $("#tab iframe").hide();
    $('#tab > div iframe:eq('+index+')').show();


    $('#tab > div iframe:eq('+index+')').attr("src", "http://mashable.com/");

    }); 

    });

所以问题是我想为每个其他 div iframe 加载一个特定的 url，因为现在 url 没有区别。请看示例：JsFiddle

【问题讨论】：

为url创建一个数组并通过索引获取url。
我想到了，但我不知道该怎么做..
...为什么不在你的 html 中设置 url 并隐藏 iframe 直到你需要它？
@nbrooks 因为有很多 iframe。这意味着我的页面加载需要一周左右的时间
@youss 好的有道理...仍然可以将 url 存储为列表项的属性，然后在单击项时动态创建 iframe。不会让你得到太多，但逻辑比拥有一堆空 iframe 并试图找出哪个对应于哪个链接更简单。无论如何只是一个替代想法

标签： jquery iframe indexing attr

【解决方案1】：

@Youss，用这个

$('document').ready(function(){
   var URL = ["URL1", "URL2", "URL3"];
   $('ul li').one('click', function(event) {

   event.preventDefault();

   var index = $('ul li').index(this);


   $("#tab iframe").hide();
   $('#tab > div iframe:eq('+index+')').show();


   $('#tab > div iframe:eq('+index+')').attr("src", URL[index]);

  }); 

});

DEMO

祝你好运

【讨论】：

@Youss，我在数组声明中犯了语法错误。我已经更新了我的答案看看。
感谢您的关注和解决我的问题（：

【解决方案2】：

这里是一些示例 html 代码

    <ul>
        <li target="http://google.co.uk">li 1</li>
        <li target="http://webdesignseolondon.co.uk">li 2</li>
        <li target="http://marianzburlea.com">li 3</li>
    </ul>

    <div id="tab">
        <div><iframe  id="frame1" src="" scrolling="no" ></iframe></div>
        <div><iframe  id="frame2" src="" scrolling="no" ></iframe></div>
        <div><iframe  id="frame3" src="" scrolling="no" ></iframe></div>
    </div>

这是你的 jQuery：

    (function(){

        $('ul li').one('click', function(e) {

            e.preventDefault();

            $("#tab iframe").hide();
            $('#frame'+$(this).index()).show();


            $('#frame'+$(this).index()).attr("src", $(this).attr('target'));

        });

    }) (jQuery);

【讨论】：

某些链接不会加载，因为加载的页面实际上会有一些 JavaScript 代码来阻止它们在 iframe 中加载