只是为了让每个人都清楚,带有双撇号的标签"标签"表示浏览器选项卡,没有撇号的表示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© 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