2017-01-07 4 views
1

カラーボックスプラグインを含むWebページを開始しました。しかし、私はUI要素(タブ)を追加すると動作しますが、私のプラグインは機能しなくなっているようです。エラー$(...)を返します。tabsは関数ではありません。このエラーは、両方の問題を解決しようとしているときにのみ発生します。タブのコードを削除すると、プラグインが正常に動作しています。何か案は?プラグインとjqueryのUIを使用できないのはなぜですか?

<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> 
+0

コードを正しく書式設定してください。読みやすく理解しやすくなります。 –

答えて

1

問題は、最初の後に2番目のバージョンのjQueryが追加されているためです。これにより、jQueryUIメソッドが適用された前のjQueryインスタンスが上書きされます。

問題を解決するには、jQueryの2番目の参照を削除するだけです1.10.2。 1つのページにjQueryの1つのバージョンしか含まれません。

<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> 
+0

ありがとうございます。 – flame

関連する問題