Warum kann ich Plugin und Jquery UI nicht verwenden?

Question

Ich habe eine Webseite mit einem Farbfeld-Plugin gestartet. Es funktioniert aber, wenn ich ui Elemente (Tabs) hinzufügen, scheint mein Plugin nicht mehr zu funktionieren. Gibt einen Fehler $ (...) zurück. Tabs ist keine Funktion. Dieser Fehler tritt nur auf, wenn ich versuche, beide zu arbeiten. Wenn ich den Code für die Tabs entferne, funktioniert das Plugin gut. Irgendwelche Ideen?

<link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet"> 
<script src="https://code.jquery.com/jquery-1.10.2.js"></script> 
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<link rel="stylesheet" type="text/css" href="proppagesstyle.css"> 
<link rel="stylesheet" href="colorbox\colorbox-master\colorbox.css" /> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<script src="colorbox\colorbox-master\jquery.colorbox.js"></script> 


<div id="tabs-1"> 
    <ul> 
     <li><a href="#tabs-2">Description</a></li> 
     <li><a href="#tabs-3">Floor Plan</a></li> 
     <li><a href="#tabs-4">Map</a></li> 
    </ul> 
    <div id="tabs-2"> 
     <p> 
      Description 
     </p> 
    </div> 
    <div id="tabs-3"> 
     <p> 
      <img src="prop1Plan.jpg"> 
     </p> 
    </div> 
    <div id="tabs-4"> 
     <p> 
      <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d39851.09199225635!2d0.061092186988258655!3d51.371935680859664!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47d8ab091574bbd7%3A0x12eb74ad89922e5b!2sOrpington!5e0!3m2!1sen!2suk!4v1482163876019" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe> 
     </p> 
    </div> 
</div> 

<script> 
    $(document).ready(function() { 
     $(".group1").colorbox({ rel: 'gallery' }); 
    }); 
    $("#click").click(function() { 
     $('#click').css({ "background-color": "#f00", "color": "#fff", "cursor": "inherit" }).text("Open this window again and this message will still be here."); 
     return false; 
    }); 

    $(function() { 
     "use strict"; 
     $("#tabs-1").tabs(); 
    }); 
</script> 

Answer 1

Das Problem liegt daran, dass Sie eine zweite Version von jQuery nach dem ersten hinzufügen. Dies überschreibt die vorherige jQuery Instanz, auf die jQueryUI-Methoden angewendet wurden.

Um das Problem zu beheben, entfernen Sie einfach den zweiten Verweis auf jQuery 1.10.2. Fügen Sie nur eine Version von jQuery auf einer Seite ein.

<link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet"> 
<link rel="stylesheet" href="colorbox\colorbox-master\colorbox.css" /> 
<link rel="stylesheet" type="text/css" href="proppagesstyle.css"> 

<script src = "https://code.jquery.com/jquery-1.10.2.js"></script> 
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<script src="colorbox\colorbox-master\jquery.colorbox.js"></script>