Question

我尝试将我的内容与jQuery load函数一起加载到index.html的内容区域。我成功了，但我的Javascript无法正常工作。我想在每次单击菜单元素时调用它。有可能吗？

菜单：

<div id="nav" class="section group">
    <div id="menu" class="col span_9_of_12">
        <ul id="navmenu">
            <li><a href="content/aboutme.html">Hakkımda</a></li>
            <li><a href="content/portfolio.html">Portfolyo</a></li>
            <li><a href="content/contact.html">İletişim</a></li>
            <li><a href="content/photos.html">Fotoğraflar</a></li>
        </ul>
    </div>

加载功能：

$(document).ready(function() {

$('#content').load($('#navmenu li a:last').attr('href'));

var hash = window.location.hash.substr(1);
var href = $('#navmenu li a').each(function(){
    var href = $(this).attr('href');
    if(hash==href.substr(0,href.length-5)){
        var toLoad = hash+'.html #content';
        $('#content').load(toLoad)
    }                                           
});

$('#navmenu li a').click(function(){

    var toLoad = $(this).attr('href')+' #content';
    $('#content').hide('slow',loadContent);
    $('#load').remove();
    window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
    function loadContent() {
        $('#content').load(toLoad,'',showNewContent())
    }
    function showNewContent() {
        $('#content').show('slow',hideLoader());
    }
    function hideLoader() {
        $('#load').fadeOut('slow');
    }
    return false;

});

});

Answer 1

更新：我的原始答案不再适用。自从我回答以来，OP完全改变了页面实现和问题。

但正如我在下面的评论中所述，easytabs documentation表明tab元素和面板div必须都在容器div中。

<div id="tab-container" class="tab-container">
    <ul class='etabs'>
        <li class='tab'><a href="#hakkimda">Hakkımda</a></li>
        <li class='tab'><a href="#portfolyo">Portfolyo</a></li>
        <li class='tab'><a href="#fotograflar">Fotoğraflar</a></li>
        <li class='tab'><a href="#iletisim">İletişim</a></li>
    </ul>
    <div id="hakkimda">
    ...
    </div>
    <div id="portfolyo">
    ...
    </div>
    <div id="iletisim">
    ...
    </div>
    <div id="fotograflar">
    ...
    </div>
 </div>

Answer 2

不是添加内联脚本，而是执行此操作

$( "#jqc_content" ).load( "content/aboutme.html", function() {
   carouselfn(); // call your carousel invocation function here
});

来自documentation

回调功能

如果提供了“完整”回调，则会在后处理和执行HTML插入后执行回调

Answer 3

我终于修好了。这都是关于html结构的。

JS在jquery加载函数后崩溃

3 个答案: