加载的div中的Jquery选项卡_Jquery_Ajax_Callback_Load_Jquery Ui Tabs

加载的div中的Jquery选项卡

jquery ajax

加载的div中的Jquery选项卡,jquery,ajax,callback,load,jquery-ui-tabs,Jquery,Ajax,Callback,Load,Jquery Ui Tabs,简单Jquery选项卡在“已加载”分区中不起作用。最初在外部文件中有jquery 加载时，ajax规则使外部html中的脚本无效已从外部html中删除脚本试图通过加载时回调函数执行制表符已验证选项卡在索引页中的html上工作，而不是在加载的html上工作索引页内容： <!DOCTYPE html> <html> <head> <title>BSP</title> <meta http-equiv="Content-T

简单Jquery选项卡在“已加载”分区中不起作用。

最初在外部文件中有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>
<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>


博客服务提供商
$（文档）.ready（函数（）{
//格式手风琴
$（函数（）{
$（“手风琴”）。手风琴({
高度样式：“内容”，
活动：错误，
可折叠：正确
});
});
//调整大小时折叠手风琴
$（窗口）。调整大小（函数（）{
$（'#accordion'）。accordion（“选项”，“活动”，假）；
});
//加载选择和格式选项卡
$（函数（）{
var工时=$（“#显示”）；
$（“#选择器”）.change（函数（事件）{
work.load（$（this.val（），function（））{
$（“#文本显示”）.tabs（）；
});
});
});
});
博客服务提供商
作品集
作品
血肉之躯
恩典
开关装置
情歌
赎回
路途

加载的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>
<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>





歌词
反思

尝试下面的代码。您可以阅读有关使用jquery的回调函数的更多信息

不要在“加载”的html文件中包含html、头或体标记。-这些将与您的索引页冲突并终止您的脚本。

您是否包含jquery ui选项卡CSS文件？是的，我知道我有正确的jquery库，因为如果我将“#textdisplay”html放入index.php，它的格式将与预期的一样。我只是无法将格式应用于加载的html。您可以添加整个有问题的索引页吗？？？为什么要加载带有“”标记的“加载的html内容”？谢谢先生，您已经完成了！