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

查看：27
本文介绍了Google 地图和 jQuery 标签的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我对包含在简单 jQuery 标签中的 Google 地图有一些小问题.

下面我粘贴了代码:

jQuery:

$(document).ready(function() {//默认动作$(".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();返回假；});});

这是标签的 HTML:

<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><div class="tab_container"><div id="tab1" class="tab_content"><h2>Tab1</h2>
<div id="tab2" class="tab_content"><h2>Tab2</h2>

<div id="tab3" class="tab_content"><div>谷歌地图

<div id="tab4" class="tab_content"><h2>Tab4</h2>

我真的不知道该怎么办.这是谷歌地图的普遍问题还是我的标签有问题?但他们在其他方面都很好.

提前感谢您的帮助

解决方案

我已经解决了问题.

将 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'});//点击事件$("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'});返回假；});});

一切正常.

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屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆