Hello All,
I have slight problem with
Google maps included in simple jQuery Tabs.
Below I pasted the code:
jQuery:
$(document).ready(function() {
//Default Action
$(".tab_content").hide();
$("ul.tabs li:first").addClass("active").show();
$(".tab_content:first").show();
//On Click Event
$("ul.tabs li").click(function() {
$("ul.tabs li").removeClass("active");
$(this).addClass("active");
$(".tab_content").hide();
var activeTab = $(this).find("a").attr("href");
$(activeTab).fadeIn();
return false;
});
});
Here is the HTML for the tabs:
<div class="bluecontainer">
<ul class="tabs">
<li><a href="#tab1">Tab1</a></li>
<li><a href="#tab2">Tab2</a></li>
<li><a href="#tab3">Tab3</a></li>
<li><a href="#tab4">Tab4</a></li>
</ul>
<div class="tab_container">
<div id="tab1" class="tab_content">
<h2>Tab1</h2>
</div>
<div id="tab2" class="tab_content">
<h2>Tab2</h2>
</div>
<div id="tab3" class="tab_content">
<div>google Map</div>
</div>
<div id="tab4" class="tab_content">
<h2>Tab4</h2>
</div>
</div>
</div>
I really don't know what to do to. Is that a general problem with
google maps or there is something with my tabs? But they are working just fine with everything else.
Thank you for your help in advance
