javascript - jquery 加载函数后 JS 崩溃

标签 javascript jquery ajax

我尝试使用 jQuery load 函数将我的内容加载到 index.html 的内容区域中。我成功了,但我的 JavaScript 不工作。我想在每次单击菜单元素时调用它。可能吗?

click here to see the page

菜单:

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

});

});

最佳答案

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

但正如我在下面的评论中所说,easytabs documentation规定选项卡元素和面板 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>

关于javascript - jquery 加载函数后 JS 崩溃,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20832786/

相关文章:

jquery - datatables 1.10 add.row() 在 ajax 响应中不起作用

javascript - 在页面加载 if 条件下运行 JS 函数

javascript - 根据响应大小改变属性值的Attribute

javascript - GLTF加载对象拖拽使用三个js

javascript - jQuery:在选择更改时隐藏/显示多个 div

jquery - AJAX:同步还是队列?

javascript - 冷融合下载文件

javascript - 单击 Angular ui 选项卡会多次触发事件

javascript - 倒数计时器显示错误的给定日期和时间

javascript - Wordpress 通过 AJAX 加载 php 内容