Q&A
jquery.jsはjQueryではなく、独自のスクリプトなのでしょうか？(提示されたもの？)
前提・実現したいこと
jQuery UI Tabs を使用してタブを作成。
発生している問題・エラーメッセージ
.load で動的に呼び出したHTMLファイルのソースに対してjQuery UI Tabsを有効化したいが別ファイルに対しての適用方法がわからない。
該当のソースコード（HTML）
<!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="utf-8"> <script src="jquery-1.11.2.min.js"></script> <title></title> </head> <body> <!-- HTMLモジュールの読込 --> <script> $(document).ready(function () { $('#header').load('header.html'); $('#main').load('main.html'); }); </script> <script src="jquery.js"></script> <script src="jquery-ui.js"></script> </body> </html>
該当のソースコード（jQuery）
$(function () { var $tabRoots = $document.find('.js-tab'); var currentClassName = 'is-current'; $tabRoots.tabs({ activate: function (event, ui) { var $newTab = ui.newTab; var $oldTab = ui.oldTab; $newTab.addClass(currentClassName); $oldTab.removeClass(currentClassName); } }); });
試したこと
いろんなところに.onつけたりしました。
事情により、上と下で別のバージョンのjQueryを読み込んでいます。こちらに関しては目をつぶっていただくことは可能でしょうか？
後で読んだjQueryのバージョンは何でしょうか？
jQuery v3.1.1 になります。
タブの内容はmain.htmlにあるのですか？
回答1件
0
ベストアンサー
mainにできるとして。
JavaScript
1$(function() { 2 var $jq3 = $.noConflict(true); 3 (function($) { 4 var $document = $(document); 5 if ($('#main .js-tab').length) { 6 createTab(); 7 } else { 8 var mutationObserver = new MutationObserver(function(mutations, observer) { 9 createTab(); 10 }); 11 mutationObserver.observe($('#main')[0], { childList: true }); 12 } 13 14 function createTab() { 15 var $tabRoots = $document.find('.js-tab'); 16 var currentClassName = 'is-current'; 17 18 $tabRoots.tabs({ 19 activate: function (event, ui) { 20 var $newTab = ui.newTab; 21 var $oldTab = ui.oldTab; 22 23 $newTab.addClass(currentClassName); 24 $oldTab.removeClass(currentClassName); 25 } 26 }); 27 } 28 })($jq3); 29});
投稿2018/02/06 09:19
総合スコア13749
あなたの回答
tips
プレビュー
