Question

I have a menu list (ul/li) which I’m trying to match a certain set of div’s. For example: if I would click in li number 3, the iframe nested in div 3 would have to ‘show’ and load a specific 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/");

    }); 

    }); 

So the problem is I want to load a specifi url for every other div iframe, as it is now there is no difference in url. Please look at the example: JsFiddle

Answer 1

@Youss, Use this

$('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

Good Luck