现在的位置: 首页 > 综合 > 正文

lightbox和jquery库图片弹出层冲突解决

2017年12月04日 ⁄ 综合 ⁄ 共 657字 ⁄ 字号 评论关闭

页面首部引用js文件如下: 

<script type="text/javascript" src="js/jquery.js"></script>

<script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>

<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />

<script type="text/javascript">

    $(function() {

        $('#mappic a').lightBox();

    });

    </script>

此时,jquery代码工作正常,而lightbox失效。

若将jquery.js的引用放到lightbox.js之上,则lightbox可正常工作,但jquery则失效

原因:在JQUERY库引用的时候,$符号的冲突,冲突存在于lightbox和jquery.js之间

解决:jQuery.noConflict();问题,JQUERY语法中把$让给其他的库

修改 lightbox变更为:

<script type="text/javascript">

var jq = jQuery.noConflict();

jq(function(){

       jq('#mappic a').lightBox();

    });

    </script>

抱歉!评论已关闭.