Question

我有一个菜单列表（ul / li），我试图匹配某组div。例如：如果我点击li数字3，嵌套在div 3中的iframe必须“显示”并加载特定网址：

$('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]);

  }); 

});

<强> DEMO

祝你好运

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

查找索引div和load attr。 iframe url

2 个答案: