jquery - 找到 Index div 并加载 attr。iframe 网址

Question

我有一个菜单列表（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

Answer 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]);

  }); 

}); 

演示

祝你好运

Answer 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);