JQuery Tabs в загруженном div

Простые вкладки JQuery не работают в "загруженном" div.JQuery Tabs в загруженном div

Первоначально во внешнем файле был jquery.
правила ajax аннулируют скрипт во внешнем html при загрузке.
удален скрипт из внешнего html
пытается выполнить вкладки через обратный вызов при загрузке.
подтвердил, что вкладки работают на html на индексной странице, а не на загруженном html.

Содержание Индекс страницы:

<!DOCTYPE html> 
<html> 
<head> 
<title>BSP</title> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<!--[if lte IE 8]> 
<script type="text/javascript" src="js/mootools.js"></script> 
<script type="text/javascript" src="js/selectivizr.js"></script> 
<![endif]--> 
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" /> 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script> 
<script src="jquery.js" type="text/javascript"></script> 
<link rel="stylesheet" type="text/css" href="stylesheet.css"> 

<script> 
$(document).ready(function(){ 
    //Format Accordion 
    $(function() { 
     $("#accordion").accordion({ 
      heightStyle: "content", 
       active: false, 
       collapsible: true 
     }); 
    }); 

    //Collapse accordion on resize 
    $(window).resize(function() { 
    $('#accordion').accordion("option", "active", false); 
    }); 

    //load selection and format tabs 
    $(function() { 
     var work = $("#display"); 
     $("#selector").change(function(event) { 
      work.load($(this).val(),function(){ 
       $("#textdisplay").tabs(); 
      }); 
     }); 
    }); 

}); 
</script> 
</head> 
<body> 
    <div id="accordion"> 
     <H3>BSP</H3> 
      <div id="biomaster"> <?php include 'bio/bio.html';?></div> 
     <H3>Collection of Works</H3> 
     <div> 
      <select name="selector" id="selector"> 
       <option value="Works">Works</option> 
       <option value="blood/blood.html">Flesh and Blood</option> 
       <option value="grace/grace.html">Grace</option> 
       <option value="gears/gears.html">Switching Gears</option> 
       <option value="love/love.html">Love Song</option> 
       <option value="redemption/redemption.html">Redemption</option> 
       <option value="way/way.html">The Way</option> 
      </select> 
      <div> 
       <div id="display"></div> 
      </div> 
     </div>  
    </div> 
</body> 
</html>

Содержание нагруженных HTML:

<html> 
<head> 
</head> 
<body> 
<div class="audiobar" > 
    <audio controls> 
     <source src="blood/blood.mp3" type="audio/mpeg" id="bloodmp3"> 
    Your browser does not support the audio element. 
    </audio> 
</div> 
<div id="textdisplay"> 
    <ul> 
    <li><a href="#Lyrics">Lyrics</a></li> 
    <li><a href="#Reflections">Reflections</a></li> 
    </ul> 
    <div id="Lyrics"> 
    <p>Lyrics</p> 
    </div> 
    <div id="Reflections"> 
    <p>Reflections</p> 
    </div> 
</div> 
</body> 
</html>

источник

2015-03-15 RedBeardPro

проверить мой ответ –

Включили ли вы jquery ui tabs файл CSS? –

Да, и я знаю, что у меня есть правильный jquery lib, потому что если я поместил html «#textdisplay» в index.php, он будет отформатирован так же, как и предполагалось. Я просто не могу получить форматирование для применения к загруженному html. – RedBeardPro

попытка ниже кода. Вы можете прочитать больше о функции обратного вызова с помощью JQuery load()

dsp.load("loaded.html",function(){ 
    $("#textdisplay").tabs(); 
});

Не включать HTML, головы или тела тег в вашем «загружено» HTML-файл. - Они будут конфликтовать с вашей индексной страницей и убить ваш скрипт.

источник

2015-03-15 03:05:53

ответ

Смежные вопросы