jQuery文件冲突
jQuery file conflict
我正在为未来的项目制作一个测试网站，我遇到了jQuery问题。这是一个带有社交小部件的静态HTML5网站，当我删除其中一行jQuery时，网站失去了风格，小部件看起来很漂亮。当我添加我删除的jQuery时，网站看起来会很好，但小部件看起来真的很糟糕。如何解决此冲突问题？我会在这里将代码添加到主网站：
<!DOCTYPE HTML>
<html><head>
<title>test site</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<!--[if lte IE 8]><script src="css/ie/html5shiv.js"></script><![endif]-->
<script src="js/jquery.min.js"></script>
<script src="js/jquery.dropotron.min.js"></script>
<script src="js/skel.min.js"></script>
<script src="js/skel-layers.min.js"></script>
<script src="js/init.js"></script>
<noscript>
<link rel="stylesheet" href="css/skel.css" />
<link rel="stylesheet" href="css/style.css" />
</noscript>
<!--[if lte IE 8]><link rel="stylesheet" href="css/ie/v8.css" /><![endif]-->
<!-- Social Widget Goodies Start -->
<link rel="stylesheet" type="text/css" href="css/dcsmt.css" media="all" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript" src="inc/js/jquery.plugins.js"></script>
<script type="text/javascript" src="inc/js/jquery.site.js"></script>
<script type="text/javascript" src="js/jquery.social.media.tabs.1.7.1.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($){
$('#social-tabs').dcSocialTabs({
widgets: 'twitter,facebook',
twitterId: '20782546',
facebookId: '69431101263',
fblikeId: '69431101263',
fbrecId: 'https://www.facebook.com/ArkansasState',
tweetId: '20782546',
autoClose: true,
facebook: {
text: 'content'
}
});
});
</script>
<!-- Social Widget Goodies End... -->
</head>
<body class="homepage">
<!-- Header -->
<div id="header-wrapper">
<div id="header" class="container">
<!-- Logo -->
<h1 id="logo"><a href="#"><img style="margin-top:10px;" src="images/logo_tiny.png" width="147" height="50" alt="logo"></a></h1>
<!-- Nav -->
<nav id="nav">
<ul>
<li>
<a href="">Main Menu</a>
<ul>
<li><a href="#">Lorem ipsum dolor</a></li>
<li><a href="#">Magna phasellus</a></li>
<li><a href="#">Etiam dolore nisl</a></li>
<li>
<a href="">Phasellus consequat</a>
<ul>
<li><a href="#">Lorem ipsum dolor</a></li>
<li><a href="#">Phasellus consequat</a></li>
<li><a href="#">Magna phasellus</a></li>
<li><a href="#">Etiam dolore nisl</a></li>
</ul>
</li>
<li><a href="#">Veroeros feugiat</a></li>
</ul>
</li>
<li><a href="#">Link#01</a></li>
<li class="break"><a href="#">Link#02</a></li>
<li><a href="#">Link#03</a></li>
</ul>
</nav>
</div>
<!-- Hero -->
<section id="hero" class="container">
<header>
<h2>ASTATE EMERGENCY PORTAL
<br/>
our main website is currently down</h2>
</header>
<p>Please scroll down and use the links provided in this portal
to access external applications like<br> e-mail, blackboard, etc. etc.</p>
<ul class="actions">
<li><a href="http://www.astate.edu" class="button">www.astate.edu</a></li>
</ul>
</section>
</div>
<!-- Features 1 -->
<div class="wrapper">
<div class="container">
<div class="row">
<section class="6u feature">
<div class="image-wrapper first">
<a href="#" class="image featured first"><img src="images/pic01.jpg" alt="" /></a>
</div>
<header>
<h2>For Students<br />
Access your E-mail Account Here</h2>
</header>
<p>Lorem ipsum dolor sit amet consectetur et sed adipiscing elit. Curabitur vel
sem sit dolor neque semper magna. Lorem ipsum dolor sit amet consectetur et sed
adipiscing elit. Curabitur vel sem sit.</p>
<ul class="actions">
<li><a href="#" class="button">Enter</a></li>
</ul>
</section>
<section class="6u feature">
<div class="image-wrapper">
<a href="#" class="image featured"><img src="images/pic02.jpg" alt="" /></a>
</div>
<header>
<h2>For Faculty & Staff<br />
Access your E-mail Account here</h2>
</header>
<p>Lorem ipsum dolor sit amet consectetur et sed adipiscing elit. Curabitur vel
sem sit dolor neque semper magna. Lorem ipsum dolor sit amet consectetur et sed
adipiscing elit. Curabitur vel sem sit.</p>
<ul class="actions">
<li><a href="#" class="button">Enter</a></li>
</ul>
</section>
</div>
</div>
</div>
<!-- Promo -->
<div id="promo-wrapper">
<section id="promo">
<h2>Live social updates</h2>
<a href="#" class="button">Do not press</a>
</section>
</div>
<!-- Features 2 -->
<div class="wrapper">
<section class="container">
<header class="major">
<h2>Sed magna consequat lorem curabitur tempus</h2>
<p>Elit aliquam vulputate egestas euismod nunc semper vehicula lorem blandit</p>
</header>
<div class="row features">
<section class="4u feature">
<div class="image-wrapper first">
<a href="#" class="image featured"><img src="images/pic03.jpg" alt="" /></a>
</div>
<p>Lorem ipsum dolor sit amet consectetur et sed adipiscing elit. Curabitur
vel sem sit dolor neque semper magna lorem ipsum.</p>
</section>
<section class="4u feature">
<div class="image-wrapper">
<a href="#" class="image featured"><img src="images/pic04.jpg" alt="" /></a>
</div>
<p>Lorem ipsum dolor sit amet consectetur et sed adipiscing elit. Curabitur
vel sem sit dolor neque semper magna lorem ipsum.</p>
</section>
<section class="4u feature">
<div class="image-wrapper">
<a href="#" class="image featured"><img src="images/pic05.jpg" alt="" /></a>
</div>
<p>Lorem ipsum dolor sit amet consectetur et sed adipiscing elit. Curabitur
vel sem sit dolor neque semper magna lorem ipsum.</p>
</section>
</div>
<ul class="actions major">
<li><a href="#" class="button">Elevate my awareness</a></li>
</ul>
</section>
</div>
<!-- Footer -->
<div id="footer-wrapper">
<div id="footer" class="container">
<header class="major">
<h2>Keep in touch with us</h2>
<p>Lorem ipsum dolor sit amet consectetur et sed adipiscing elit. Curabitur vel sem sit<br />
dolor neque semper magna lorem ipsum feugiat veroeros lorem ipsum dolore.</p>
</header>
<div class="row">
<section class="6u">
<form method="post" action="#">
<div class="row collapse-at-2 half">
<div class="6u">
<input name="name" placeholder="Name" type="text" />
</div>
<div class="6u">
<input name="email" placeholder="Email" type="text" />
</div>
</div>
<div class="row half">
<div class="12u">
<textarea name="message" placeholder="Message"></textarea>
</div>
</div>
<div class="row half">
<div class="12u">
<ul class="actions">
<li><input type="submit" value="Send Message" /></li>
<li><input type="reset" value="Clear form" /></li>
</ul>
</div>
</div>
</form>
</section>
<section class="6u">
<div class="row collapse-at-2 flush">
<ul class="divided icons 6u">
<li class="icon fa-twitter"><a href="#"><span class="extra">twitter.com/</span>untitled</a></li>
<li class="icon fa-facebook"><a href="#"><span class="extra">facebook.com/</span>untitled</a></li>
<li class="icon fa-dribbble"><a href="#"><span class="extra">dribbble.com/</span>untitled</a></li>
</ul>
<ul class="divided icons 6u">
<li class="icon fa-instagram"><a href="#"><span class="extra">instagram.com/</span>untitled</a></li>
<li class="icon fa-youtube"><a href="#"><span class="extra">youtube.com/</span>untitled</a></li>
<li class="icon fa-pinterest"><a href="#"><span class="extra">pinterest.com/</span>untitled</a></li>
</ul>
</div>
</section>
</div>
</div>
<div id="copyright" class="container">
<ul class="menu">
<li>©2014 - ASTATE Emergency Portal. All rights reserved.</li>
</ul>
</div>
</div>
</body>
<div id="social-tabs"></div>
</html>
这是由脚本的排序引起的。您不应该仅仅删除js/jquery.min.js，而应该将另一个jQuery脚本移到这个位置：
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js">
</script>
<script src="js/jquery.dropotron.min.js"></script>
<script src="js/skel.min.js"></script>
<script src="js/skel-layers.min.js"></script>
...
否则，位于该jQuery include当前位置上方的JavaScript文件可能不会等待jQuery加载，然后再尝试执行jQuery调用。
相关文章：
- 导致内容安全策略(CSP）冲突错误的本地jquery.js文件
- 包含文件时发生冲突
- 我的React应用程序的根文件夹与React Router冲突
- 如何在没有冲突的情况下将 JQuery 包含在 JavaScript 文件中
- 如何创建具有多个可能冲突的要求的.d.ts文件
- Jest 无法构建依赖关系图，源文件和构建文件之间存在冲突
- 由于添加或删除文件而导致的文件冲突，引导弹出框不起作用
- 冲突安全追加到约曼生成器中的现有文件
- 如果我使用两个不同的 IDE 打开源代码文件，是否有任何冲突
- jQuery文件冲突
- Chrome扩展:jQuery.js在后台文件中与网站中的插件冲突
- wordpress安装中多个js文件之间的冲突
- 将几个java脚本组合到一个.js文件中，现在具有冲突的onload函数
- RateIt jquery插件创建一个冲突的jquery文件，我在我的项目
- Garmin prototype.js与本地jquery文件冲突
- 如何防止一个JavaScript文件与另一个冲突?
- 节点:所需文件的名称冲突
- 如何解决多个js文件冲突问题
- 与本地策略的冲突在两个单独的文件中
- Javascript / jquery文件相互冲突
