Google地图和jQuery标签 [英] Google Maps and jQuery Tabs

问题描述

下面我粘贴了代码：

p> jQuery：

  $（document）.ready（function（）{
 
 // Default Action 
 $（。tab_content）。hide（）; 
 $（ul.tabs li：first）。addClass（active）。show（）; 
 $（ .tab_content：first）。show（）; 
 
 //点击事件
 $（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; 
}） ; 
 
}）; 
  

以下是标签的HTML：

 < 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 =tab1class =tab_content> 
< h2> Tab1< / h2> 
< / div> 
< div id =tab2class =tab_content> 
< h2> Tab2< / h2> 
< / div> 
< div id =tab3class =tab_content> 
< div> 
 google地图
< / div> 
< / div> 
< div id =tab4class =tab_content> 
< h2> Tab4< / h2> 
< / div> 
< / div> 
< / div> 
  

我真的不知道该怎么做。这是谷歌地图的一般问题还是有我的标签？但是他们在其他方面工作得很好。

感谢您提前给予帮助

解决方案

在jQuery中将hide（）更改为css.visibility，因此选项卡看起来像这样。

  $（document）.ready（function（）{
 
 //默认动作
 $（ .tab_content）.css（{'visibility'：'hidden'，'position'：'absolute'}）; 
 $（ul.tabs li：first）。addClass（active）。show （）; 
 $（。tab_content：first）。css（{'visibility'：'visible'，'position'：'static'}）; 
 $ b $ // //点击事件
 $（ul.tabs li）。click（function（）{
 $（ul.tabs li）。removeClass（active）; 
 $（this） .addClass（active）; 
 $（。tab_content）。css（{'visibility'：'hidden'，'position'：'absolute'}）; 
 var activeTab = $（这个）.find（a）。attr（href）; 
 $（activeTab）.css（{'visibi lity'：'visible'，'position'：'static'}）; 
 return false; 
}）; 
 
}）; 
  

一切正常。

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

解决方案

I have solved the problem.

changed hide() in jQuery to css.visibility, so the tabs looks like this.

$(document).ready(function() {

    //Default Action
    $(".tab_content").css({'visibility':'hidden'  , 'position':'absolute'});
    $("ul.tabs li:first").addClass("active").show(); 
    $(".tab_content:first").css({'visibility':'visible' , 'position':'static'}); 

    //On Click Event
    $("ul.tabs li").click(function() {
        $("ul.tabs li").removeClass("active");
        $(this).addClass("active"); 
        $(".tab_content").css({'visibility':'hidden' , 'position':'absolute'}); 
        var activeTab = $(this).find("a").attr("href"); 
        $(activeTab).css({'visibility':'visible'  , 'position':'static'});
        return false;
    });

});

Everything works just fine.

这篇关于Google地图和jQuery标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！