在浏览器中切换标签后加载图像

时间:2015-02-26 05:09:06

标签: jquery html css flexslider

只是为了让每个人都清楚,带有双撇号的标签"标签"表示浏览器选项卡,没有撇号的表示jquery ui选项卡。我创建了一个html页面,其中有两个选项卡,即使用jquery ui的gallery和grid。在一个选项卡,即活动标签(网格)我使用了花哨的盒子插件工作正常,在画廊选项卡我使用flexslider插件,这是我得到一个奇怪的问题。

当我点击图库标签时,没有图像只显示轮播和滑块的边框,但是当我切换浏览器"标签"并再次返回我的页面,显示滑块图像,当我再次切换时,显示滑块图像。我不知道为什么会发生这种情况并且让我感到烦恼。任何帮助将不胜感激!!

<div class="container">
    <div class="main_container">
        <div class="header">
            <img src="images/header_image.jpg" />   <a class="logo" href="index.html"><img src="images/logo.jpg"/></a>

            <div class="search">
                <button>
                    <img src="images/search_icon.jpg">
                </button>
                <input type="text" placeholder="Search...">
            </div>
        </div>
        <!--header-->
        <div class="menu">
            <ul class="menu_bar">   <a href="index.html"><li>About Us</li></a>
    <a href="my_pictures.html"><li class="active">My Pictures</li></a>
    <a href="my_music.html"><li>My Music</li></a>
    <a href="my_files.html"><li>My Files</li></a>
    <a href="my_videos.html"><li>My Videos</li></a>

            </ul>
        </div>
        <!--menu-->
        <div class="main_content">
            <div id="tabs">
                <ul class="my_pictures">
                    <li class="picture_menu"><a href="#tabs-1">Grid</a>
                    </li>
                    <li class="picture_menu"><a href="#tabs-2">Gallery</a>
                    </li>
                </ul>
                <div id="tabs-1" class="grid_view"> <a class="fancybox" href="images/pic1.jpg" data-fancybox-group="gallery" title="Lorem ipsum dolor sit amet"><img src="images/pic1.jpg" alt="" /></a>
    <a class="fancybox" href="images/pic2.jpg" data-fancybox-group="gallery" title="Lorem ipsum dolor sit amet"><img src="images/pic2.jpg" alt="" /></a>
    <a class="fancybox" href="images/pic3.jpg" data-fancybox-group="gallery" title="Lorem ipsum dolor sit amet"><img src="images/pic3.jpg" alt="" /></a>
    <a class="fancybox" href="images/pic4.jpg" data-fancybox-group="gallery" title="Lorem ipsum dolor sit amet"><img src="images/pic4.jpg" alt="" /></a>
    <a class="fancybox" href="images/pic5.jpg" data-fancybox-group="gallery" title="Lorem ipsum dolor sit amet"><img src="images/pic5.jpg" alt="" /></a>
    <a class="fancybox" href="images/pic6.jpg" data-fancybox-group="gallery" title="Lorem ipsum dolor sit amet"><img src="images/pic6.jpg" alt="" /></a>
    <a class="fancybox" href="images/big_violin.jpg" data-fancybox-group="gallery" title="Lorem ipsum dolor sit amet"><img src="images/pic7.jpg" alt="" /></a>
    <a class="fancybox" href="images/pic8.jpg" data-fancybox-group="gallery" title="Lorem ipsum dolor sit amet"><img src="images/pic8.jpg" alt="" /></a>
    <a class="fancybox" href="images/pic9.jpg" data-fancybox-group="gallery" title="Lorem ipsum dolor sit amet"><img src="images/pic9.jpg" alt="" /></a>
    <a class="fancybox" href="images/pic10.jpg" data-fancybox-group="gallery" title="Lorem ipsum dolor sit amet"><img src="images/pic10.jpg" alt="" /></a>
    <a class="fancybox" href="images/pic11.jpg" data-fancybox-group="gallery" title="Lorem ipsum dolor sit amet"><img src="images/pic11.jpg" alt="" /></a>
    <a class="fancybox" href="images/pic12.jpg" data-fancybox-group="gallery" title="Lorem ipsum dolor sit amet"><img src="images/pic12.jpg" alt="" /></a>
    <a class="fancybox" href="images/pic13.jpg" data-fancybox-group="gallery" title="Lorem ipsum dolor sit amet"><img src="images/pic13.jpg" alt="" /></a>
    <a class="fancybox" href="images/pic14.jpg" data-fancybox-group="gallery" title="Lorem ipsum dolor sit amet"><img src="images/pic14.jpg" alt="" /></a>
    <a class="fancybox" href="images/pic15.jpg" data-fancybox-group="gallery" title="Lorem ipsum dolor sit amet"><img src="images/pic15.jpg" alt="" /></a>

                </div>
                <div id="tabs-2" class="gallery_view">
                    <div id="slider" class="flexslider">
                        <ul class="slides">
                            <li>
                                <img src="images/gun.jpg">
                            </li>
                            <li>
                                <img src="images/boombox.jpg">
                            </li>
                            <li>
                                <img src="images/book.png">
                            </li>
                            <li>
                                <img src="images/pic4.jpg">
                            </li>
                            <li>
                                <img src="images/pic5.jpg">
                            </li>
                            <li>
                                <img src="images/pic6.jpg">
                            </li>
                            <li>
                                <img src="images/big_violin.jpg">
                            </li>
                            <li>
                                <img src="images/pic8.jpg">
                            </li>
                            <li>
                                <img src="images/pic9.jpg">
                            </li>
                            <li>
                                <img src="images/pic10.jpg">
                            </li>
                            <li>
                                <img src="images/pic11.jpg">
                            </li>
                            <li>
                                <img src="images/pic12.jpg">
                            </li>
                        </ul>
                    </div>
                    <div id="carousel" class="flexslider">
                        <ul class="slides">
                            <li>
                                <img src="images/pic1.jpg" />
                            </li>
                            <li>
                                <img src="images/pic2.jpg" />
                            </li>
                            <li>
                                <img src="images/pic3.jpg" />
                            </li>
                            <li>
                                <img src="images/pic4.jpg" />
                            </li>
                            <li>
                                <img src="images/pic5.jpg" />
                            </li>
                            <li>
                                <img src="images/pic6.jpg" />
                            </li>
                            <li>
                                <img src="images/pic7.jpg" />
                            </li>
                            <li>
                                <img src="images/pic8.jpg" />
                            </li>
                            <li>
                                <img src="images/pic9.jpg" />
                            </li>
                            <li>
                                <img src="images/pic10.jpg" />
                            </li>
                            <li>
                                <img src="images/pic11.jpg" />
                            </li>
                            <li>
                                <img src="images/pic12.jpg" />
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <!--main_content-->
        <div class="footer">
            <ul>
                <li><a href="#">EULA</a>
                </li>
                <li><a href="#">Terms of Services</a>
                </li>
                <li><a href="#">Privacy Policy</a>
                </li>
            </ul>
            <div class="footer_content">
                <img src="images/footer_image.jpg">copyright&copy;&nbsp;2012 My Website. All rights reserved.</div>
            <div class="social_icons">  <a href="https://blogger.com" target="blank"><img src="images/blogger.jpg"></a>
    <a href="https://facebook.com" target="blank"><img src="images/facebook.jpg"></a>
    <a href="https://digg.com" target="blank"><img src="images/digg.jpg"></a>
    <a href="https://linkedin.com" target="blank"><img src="images/in.jpg"></a>
    <a href="https://evernote.com" target="blank"><img src="images/evernote.jpg"></a>
    <a href="https://twitter.com" target="blank"><img src="images/twitter.jpg"></a>

            </div>
        </div>
        <!--footer-->
    </div>
    <!--main_container-->
</div>
<!--container-->

以下是Fiddle

0 个答案:

没有答案