灯箱+ jQuery冲突
Lightbox
我做了一个制表导航使用jQuery
.. Chrome
可视化是好的,但在Firefox
是一团糟。灯箱+ jQuery冲突
我做错了什么,因为event.preventDefault();
和return false
不工作(我不得不使用滚动点击锚a href="#id_name
的选项卡控制器后搬回到页面的底部)
任何帮助将不胜感激。
头:
<!-- Lightbox + Prototype + jQuery -->
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script type="text/javascript">
if (typeof jQuery == 'undefined') { document.write(unescape("%3Cscript src='js/jquery-1.8.0.min.js' type='text/javascript'%3E%3C/script%3E")); }
</script>
的jQuery的标签导航:
<script type="text/javascript">
$(document).ready(function() {
//Default Action
$(".tab_content").hide(); //Hide all content
$("ul.bmenu li:first").addClass("active").show(); //Activate first tab
$(".tab_content:first").show(); //Show first tab content
//On Click Event
$("ul.bmenu li").click(function(event) {
event.preventDefault(); //non impedisce di scrollare to Top
$("html, body").animate({ scrollTop: $(document).height() }, "slow");
$("ul.bmenu li").removeClass("active"); //Remove any "active" class
$(this).addClass("active"); //Add "active" class to selected tab
$(".tab_content").hide(); //Hide all tab content
var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
$(activeTab).fadeIn(); //Fade in the active content
return false; //non impedisce di scrollare to Top
});
});
</script>
一些HTML的:
<div class="tab_content content" id="tab2">
<div class="images_grid"> <!-- images_grid_collezione -->
<!-- Riga 1 -->
<a href="imgs_grid/Rosso_01.png" rel="lightbox[medardo_rosso]"><img class="grid_img" src="imgs_grid/Rosso_01.png" alt="" /></a>
<a href="imgs_grid/Rosso_02.png" rel="lightbox[medardo_rosso]"><img class="grid_img" src="imgs_grid/Rosso_02.png" alt="" /></a>
我上传的临时目录here的网站。
广场<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
在头
问题的第一行是要包括jquery
在那些依靠jQuery的最后和其他库之前,jQuery的。订单是否有问题包括它在开始,你应该很好
<script type="text/javascript" src="js/prototype.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<script type="text/javascript">
if (typeof jQuery == 'undefined') { document.write(unescape("%3Cscript src='js/jquery-1.8.0.min.js' type='text/javascript'%3E%3C/script%3E")); }
</script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
谢谢你的回答,但仍然灯箱不工作.. –
@AndreaVaccarella你有JavaScript的错误该页面尝试先删除它们 –
我解决了它通过使用jQuery noConflict模式。长篇小说:原型简短符号“$”与jQuery短符号“$”相冲突。
在脚本的开头添加“jQuery.noConflic()”,并将“$”替换为“jQuery”或简单地添加一个变量(我使用“j”)。
$j(document).ready(function() { $j(".tab_content").hide(); //Some Other actions ...
问题solved.Thanks大家的帮助! :)
谢谢,但这样的选项卡导航打破(不知道为什么说实话) –