Question

简单的Jquery选项卡无法在＆＃34; loading＆＃34;格。

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

Answer 1

尝试以下代码。您可以使用jquery load()

了解有关回调函数的更多信息

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

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

加载div中的Jquery选项卡

1 个答案: