|
Hi, I have just started using Bing Maps and this custom infobox exactly what I needed. It works great and I can css my html content. One thing I can't do is use jQuery to show and hide tabs inside the info box. Is this something I should be able to do or
will custon infobox not allow this?
I have the follwing html:
//Define the layout contents in the infobox
var html = ["<div id='tabs' style='padding:10px'>"];
html.push("<ul><li><a href='#tab-1'>tab 1</a></li><li><a href='#tab-2'>more stuff</a></li><li><a href='#tab-3'>even more stuff</a></li></ul>");
html.push("<div id='tab-1'><p>", e.target.description, "</p></div>");
html.push("<div id='tab-2'><p>more</p></div>");
html.push("<div id='tab-3'><p>stuff</p></div>");
html.push("</div>");
These 3 div and the tab list display but the jQuery below just does not work:
jQuery(document).ready(function($){
$('#myMap_infobox').hide(); // Hide all divs
$('#tabs div:first').show(); // Show the first div
$('#tabs ul li:first').addClass('active'); // Set the class of the first link to active
$('#tabs ul li a').click(function(){ //When any link is clicked
$('#tabs ul li').removeClass('active'); // Remove active class from all links
$(this).parent().addClass('active'); //Set clicked link class to active
var currentTab = $(this).attr('href'); // Set variable currentTab to value of href attribute of clicked link
$('#tabs div').hide(); // Hide all divs
$(currentTab).show(); // Show div with id equal to variable currentTab
return false;
});
This jQuery works fine in the html tabs outside the infobox
Any ideas?
Thanks, Dan
|