Onglets Jquery dans la division chargée

Les onglets Jquery simples ne fonctionnent pas dans la div "chargée".Onglets Jquery dans la division chargée

Initialement jquery dans le fichier externe. Les règles ajax annulent le script dans le html externe en charge.
script supprimé de html externe
tentative d'exécution d'onglets via callback sur la fonction de chargement.
vérifié que les onglets fonctionne sur html dans la page d'index, pas sur html chargé.

Contenu de la page d'index:

<!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>

Contenu du HTML Loaded:

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

Source

2015-03-15 RedBeardPro

vérifier ma réponse –

Avez-vous inclus jquery ui tabs fichier CSS ?? –

Oui, et je sais que j'ai la bonne jquery lib parce que si je mets le "#textdisplay" html dans le index.php, il est formaté comme il est supposé le faire. Je ne peux pas obtenir la mise en forme à appliquer au html chargé. – RedBeardPro

essayer ci-dessous le code. vous pouvez en savoir plus sur la fonction de rappel à l'aide jquery load()

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

Ne pas inclure les html, la tête ou les balises de corps dans votre fichier html « chargé ». - Ceux-ci entreront en conflit avec votre page d'index et tueront votre script.

Source

2015-03-15 03:05:53

Onglets Jquery dans la division chargée

Répondre

Questions connexes