javascript - 如何定位和解决多个外部Javascript和CSS引起的冲突？

Question

在构建页面时，我导入了多个(超过10个)外部CSS和Javascript，包括但不限于timerangepicker、bootstrap和tabber。

问题是，当所有这些一起加载时似乎存在一些冲突，因为它们导致我的 UI 完全困惑(一些元素会出现在错误的位置，一些功能如 timerangepicker 将无法工作).

我很确定冲突是由所有这些文件一起加载引起的，因为当我禁用某些外部文件时，某些 UI 会再次正常。这些是外部文件:

    <script type="text/javascript" src="//cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
    <script type="text/javascript" src="//cdn.jsdelivr.net/jquery/1/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap/3/css/bootstrap.css">
    <script type="text/javascript" src="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.js"></script>
    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.css" />

    <link rel="stylesheet" type="text/css" href="<?php echo APP_WEBSITE;?>/css/style.css">
    <link href="<?php echo APP_WEBSITE;?>/css/tabber.css" rel="stylesheet" type="text/css" />
    <link href="<?php echo APP_WEBSITE;?>/css/styles-pop.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="<?php echo WEBSITE;?>/js/tabs_slides.js"></script>
    <script type="text/javascript" src="<?php echo WEBSITE;?>/js/tabber.js"></script>
    <script src="<?php echo WEBSITE; ?>/js/jquery-1.11.0.min.js"></script>
    <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script type="text/javascript" src="//cdn.jsdelivr.net/jquery/1/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="../templates/layout/css/bootstrap.css">
    <link rel='stylesheet' href="<?php echo APP_WEBSITE;?>/css/browsebootstrap.css">
    <link rel="stylesheet" type="text/css" href="<?php echo APP_WEBSITE; ?>/css/checkbox.css">
    <link rel="stylesheet" type="text/css" href="<?php echo APP_WEBSITE;?>/css/ver02/search_payment.css">
    <script src="<?php echo WEBSITE; ?>/js/browse.js"></script>
    <script type="text/javascript" src="//cdn.jsdelivr.net/jquery/1/jquery.min.js"></script>
    <script type="text/javascript" src="//cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
    <script type="text/javascript" src="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.js"></script>
    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.css" />
    <link href="css/default.css" rel="stylesheet" type="text/css" />
    <link href="css/form.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="css/scrollbar.css">
    <link href="css/topmenu.css" rel="stylesheet" type="text/css" />
    <link href="css/search.css" rel="stylesheet" type="text/css" />
    <link href="css/font-awesome.css" rel="stylesheet" type="text/css" />
    <link href="css/font-awesome-animation.min.css" rel="stylesheet" type="text/css" />

我知道有一些冗余，但奇怪的是，有些功能只有在我这样说的情况下才能工作。

我的问题是，如何准确查明哪些文件与哪些文件冲突？他们太多了。我怎样才能避免冲突？

感谢和欢呼。

Answer 1

第一步是删除重复的文件引用。例如，您有 4 个不同版本的引用 jquery 文件。只用一个。

<script type="text/javascript" src="//cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery/1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap/3/css/bootstrap.css">
<script type="text/javascript" src="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.css" />

<link rel="stylesheet" type="text/css" href="<?php echo APP_WEBSITE;?>/css/style.css">
<link href="<?php echo APP_WEBSITE;?>/css/tabber.css" rel="stylesheet" type="text/css" />
<link href="<?php echo APP_WEBSITE;?>/css/styles-pop.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="<?php echo WEBSITE;?>/js/tabs_slides.js"></script>
<script type="text/javascript" src="<?php echo WEBSITE;?>/js/tabber.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="<?php echo APP_WEBSITE; ?>/css/checkbox.css">
<link rel="stylesheet" type="text/css" href="<?php echo APP_WEBSITE;?>/css/ver02/search_payment.css">
<script src="<?php echo WEBSITE; ?>/js/browse.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.css" />
<link href="css/default.css" rel="stylesheet" type="text/css" />
<link href="css/form.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="css/scrollbar.css">
<link href="css/topmenu.css" rel="stylesheet" type="text/css" />
<link href="css/search.css" rel="stylesheet" type="text/css" />
<link href="css/font-awesome.css" rel="stylesheet" type="text/css" />
<link href="css/font-awesome-animation.min.css" rel="stylesheet" type="text/css" />