页面有多个jquery版本，如何解决冲突

fandylee828 2012-06-27 02:07:07
有两个Jquery，如果放到同一个页面就会冲突导致无法运行，请问如何处理才能解决这个问题，最好能把答案写出来，因为本人在JQuery是菜鸟级别，谢谢了

<head runat="server">

    <title>无标题页</title>



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

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

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

    <link href="style/css/base.css" rel="stylesheet" type="text/css" />

    <link href="style/css/demo.css" rel="stylesheet" type="text/css" />



    <script type="text/javascript">  

             var jQuery_New = $.noConflict(true);  

         </script>  

    <script type="text/javascript">

$(function(){

	var VT = $("#demo1").verticalTab({titlesApplyTo:"#demo1-titles",

	                         contentsApplyTo : "#demo1-contents",

							 currentTitleCls : "demo1-current-title",

							 animateType : "fade"});	 

})

    </script>

</head>

<body>

    <form id="form1" runat="server">

    <div class="mar-t-10 clearfix" id="demo1">

            <div class="l" id="demo1-titles">

                <ul>

                    <li>相关文章 </li>

                    <li>最新文章 </li>

                    <li>最热文章 </li>

                    <li class="bor-b-no">随机文章 </li>

                </ul>

            </div>

            <div class="l" id="demo1-contents">

                <ul>

                    <li>

                        <ul class="post-title-list">

                            <li>f</li>

                        </ul>

                    </li>

                    <li>

                        <ul class="post-title-list">

                            <li>a</li>

                        </ul>

                    </li>

                    <li>

                        <ul class="post-title-list">

                            <li>d</li>

                        </ul>

                    </li>

                    <li>

                        <ul class="post-title-list">

                            <li>f</li>

                        </ul>

                    </li>

                </ul>

            </div>

        </div>

    </form>

</body>



<head runat="server">

    <title>无标题页</title>

    <style type="text/css">

*{margin:0;padding:0;list-style-type:none;}

a,img{border:0;}

img{vertical-align:middle}

/* lamp */

.lamp{height:906px;width:960px;position:relative;margin:0 auto;}

.lamp .sublight{position:absolute;display:block;overflow:hidden;}

.lamp .pic1{top:0;left:0;width:240px;height:366px;}

.lamp .pic2{top:0;left:240px;width:480px;height:183px;}

.lamp .pic3{top:0;left:720px;width:240px;height:183px;}

.lamp .pic4{top:183px;left:240px;width:240px;height:183px;}

.lamp .pic5{top:183px;left:480px;width:240px;height:183px;}

.lamp .pic6{top:183px;left:720px;width:240px;height:183px;}

.lamp .pic7{top:366px;left:0;width:240px;height:366px;}

.lamp .pic8{top:366px;left:240px;width:480px;height:183px;}

.lamp .pic9{top:366px;left:720px;width:240px;height:183px;}

.lamp .pic10{top:549px;left:240px;width:240px;height:183px;}

.lamp .pic11{top:549px;left:480px;width:240px;height:183px;}

.lamp .pic12{top:549px;left:720px;width:240px;height:183px;}

</style>

</head>

<body>

    <form id="form1" runat="server">

        <div class="lamp">

            <div>

                <a target="_blank" href="http://www.jsfoot.com/" class="sublight pic1">

                    <img src="images/dudu.jpg" title="DUDU 源自意大利的真皮风尚"></a> <a target="_blank" href="http://www.jsfoot.com/"

                        class="sublight pic2">

                        <img src="images/event_02.jpg" title="浪美 自由行走间的风尚标" /></a> <a target="_blank" href="http://www.jsfoot.com/"

                            class="sublight pic3">

                            <img src="images/gb3.jpg" title="戈尔本 成就男士商务之旅"></a> <a target="_blank" href="http://www.jsfoot.com/"

                                class="sublight pic4">

                                <img src="images/zne.jpg" title="卓妮尔 当优雅与摩登不期而遇"></a> <a target="_blank" href="http://www.jsfoot.com/"

                                    class="sublight pic5">

                                    <img src="images/fbs2.jpg" title="梵贝斯 来自东京武藏野设计"></a> <a target="_blank" href="http://www.jsfoot.com/"

                                        class="sublight pic6">

                                        <img src="images/xxbm2.jpg" title="希夏邦马 运动与旅行的完美结合"></a>

            </div>

            <div>

                <a target="_blank" href="http://www.jsfoot.com/" class="sublight pic7">

                    <img src="images/dudu.jpg" title="DUDU 源自意大利的真皮风尚"></a> <a target="_blank" href="http://www.jsfoot.com/"

                        class="sublight pic8">

                        <img src="images/event_02.jpg" title="浪美 自由行走间的风尚标" /></a> <a target="_blank" href="http://www.jsfoot.com/"

                            class="sublight pic9">

                            <img src="images/gb3.jpg" title="戈尔本 成就男士商务之旅"></a> <a target="_blank" href="http://www.jsfoot.com/"

                                class="sublight pic10">

                                <img src="images/zne.jpg" title="卓妮尔 当优雅与摩登不期而遇"></a> <a target="_blank" href="http://www.jsfoot.com/"

                                    class="sublight pic11">

                                    <img src="images/fbs2.jpg" title="梵贝斯 来自东京武藏野设计"></a> <a target="_blank" href="http://www.jsfoot.com/"

                                        class="sublight pic12">

                                        <img src="images/xxbm2.jpg" title="希夏邦马 运动与旅行的完美结合"></a>

            </div>

        </div>



        <script type="text/javascript" src="http://www.jsfoot.com/skinnew/js/jquery-1.2.6.pack.js"></script>



        <script type="text/javascript">

// 高亮效果

var blockHighLight = (function(window, $, undefined){

    var markers = [];

    return function(boxCls, itemCls, sizeArr){

        var box = $(boxCls);

        itemCls = itemCls || "a";

        box.find(itemCls).each(function(i){

            var self = $(this);

            var arr,w,h,marker;

            if(sizeArr !== undefined){

                arr = sizeArr[i].split(",");

                w = arr[0];

                h = arr[1];

            }else{

                w = self.find("img").attr("width");

                h = self.find("img").attr("height");

            }

            marker = $('<div style="cursor:pointer;top:0;left:0;position:absolute;width:'+w+'px;height:'+h+'px;filter:alpha(opacity=0);opacity: 0;background-color:#000;"></div>');

            self.append(marker);

            self.mouseover(function(){

                for(var i=0; i<markers.length; i++){

                    markers[i].show().css({"opacity":'0.2',"filter":"alpha(opacity=20)"});

                }

                marker.hide();

            });     

            markers.push(marker);

                

        });



        box.mouseout(function(){

            for(var i=0; i<markers.length; i++){

                markers[i].css({"opacity":'0',"filter":"alpha(opacity=0)"});

            }

        })

    }

})(this, $);



blockHighLight(



	".lamp", //父元素

	".sublight", //子元素集

	

	[

		'240,366', //第一张图片的宽高

		'480,183', //第二张图片的宽高

		'240,183', //第三张图片的宽高

		'240,183', //第四张图片的宽高

		'240,183', //第五张图片的宽高

		'240,183', //第六张图片的宽高

		'240,366', //第一张图片的宽高

		'480,183', //第二张图片的宽高

		'240,183', //第三张图片的宽高

		'240,183', //第四张图片的宽高

		'240,183', //第五张图片的宽高

		'240,183'  //第六张图片的宽高

	]

); 



        </script>



    </form>

</body>
...全文
322 4 打赏 收藏 转发到动态 举报
写回复
用AI写文章
4 条回复
切换为时间正序
请发表友善的回复…
发表回复
想念旧时光 2012-06-27
  • 打赏
  • 举报
 回复
删除 <script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
豪情 2012-06-27
  • 打赏
  • 举报
 回复
肯定优先使用高版本的，然后针对出现的问题一一解决。
风一样的大叔 2012-06-27
  • 打赏
  • 举报
 回复
把那个1.3删除掉不就可以了?
fandylee828 2012-06-27
  • 打赏
  • 举报
 回复
咦。。。。居然没人回答
jquery插件冲突(jquery.noconflict)解决方法分享
本文主要解决了如何让多个不同的jQuery版本在同一个页面并存而不冲突的方法,需要的朋友可以参考下
jquery版本共存_项目中同一个页面引入不同的jQuery版本的不冲突问题
时长会遇到需要引入不同版本的jQuery，可能上一个负责该项目的人用到的是老版本的jQuery，而你去添加功能时用的是新版本的，这个问题很难避免掉，如果去改代码，可能会浪费很长的时间，下面说一下我的解决方法。...
JQuery快速入门教程
课程目标什么是jQuery 是一个JavaScript的函数库 jQuery是一个轻量级的JavaScript库 浏览器兼容比较好 jQuery可以简化JavaScript代码适用人群Java初级开发人员，JavaScript初学者，web前端开发人员课程简介 课程目标...
老生常谈，不同版本jQuery同一页面冲突问题
同一页面jQuery其他不同版本并存冲突的问题
同一个页面引入多个版本jQuery实现共存
一、问题背景 1、一个老项目，需要调整部分前端功能，由于...2、需求就是： 同一个页面需要多个不同版本的jQuery共存，在不同的方法里，使用不同的jQuery对象进行操作。 二、代码尝试 1、在html页面，引入两个不...
JavaScript

87,910

社区成员

224,616

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章