Question

我正在使用AJAX内容加载器在一个站点上工作，从我的所有HTML页面引入一个div。它适用于#menu部分中的链接，但不适用于我的#thumbs部分。

即使我将链接切换到相对的部分，它们也仅适用于#menu，而不是#thumbs。我花了好几个小时看着这个并改变现状，但仍然无法弄清楚！

我尝试过使用#thumbs a，#thumbs，#t1 a, #t2 a, #t3 a, #t4 a, #t5 a, #t6 a等等，但仍然没有！

到目前为止，您可以在此处查看完整网站：http://www.sarahubbarddesign.com/BP%20SITE-SHD/index.html 任何帮助表示赞赏！

<div id="header">
        <div id="logo">
            <img src="images/borealis_photo_logo.jpg" alt=""/>
        </div>
        <div id="menu">
            <div class="menuContact"><a href="contact_bp.html" id="mC">Contact</a></div>
            <div class="menuAbout"><a href="about_bp.html" id="mA">About</a></div>
            <div class="menuHome"><a href="index.html" id="mH">Home</a></div>
    </div>
</div>

<div id="content">
    <div id="mainImage">
        <img src="images/homeImage.jpg" alt=""/>
    </div>
    <div id="thumbs">
        <div id="t1"><a href="portfolio1_bp.html" id="p2"><img id="i1" src="images/thumbs/portThumb_snort.jpg" alt="" /></a></div>
        <div id="t2"><a href="portfolio2_bp.html" id="p2"><img id="i2" src="images/thumbs/portThumb_horse.jpg" alt="" /></a></div>
        <div id="t3"><a href="portfolio3_bp.html" id="p3"><img id="i3" src="images/thumbs/portThumb_pets.jpg" alt="" /></a></div>
        <div id="t4"><a href="portfolio4_bp.html" id="p4"><img id="i4" src="images/thumbs/portThumb_ppl.jpg" alt="" /></a></div>
        <div id="t5"><a href="portfolio5_bp.html" id="p5"><img id="i5" src="images/thumbs/portThumb_places.jpg" alt="" /></a></div>
        <div id="t6"><a href="portfolio6_bp.html" id="p6"><img id="i6" src="images/thumbs/portThumb_things.jpg" alt="" /></a></div>
    </div><!--END THUMBS DIV-->

//NEW-- LOAD CONTENT IN MAINIMAGE DIV AND CHANGE URL       
    var hash = window.location.hash.substr(1);
    var href = $("#menu a, #thumbs a").each(function(){
        var href = $(this).attr('href');
        if(hash==href.substr(0,href.length-5)){
            var toLoad = hash+'.html #mainImage';
            $('#mainImage').load(toLoad)
        }
    });
    $("#menu a, #thumbs a").click(function(){             
        var toLoad = $(this).attr('href')+' #mainImage';
        $('#mainImage').fadeOut("fast",loadContent);
        window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
        function loadContent() {
            $('#mainImage').load(toLoad,'',showNewContent())
        }
        function showNewContent() {
            //Slider();
            $('#mainImage').fadeIn("1000");
            //Slider();
        }
        return false;
    });

Answer 1

我认为在链接标记上没有触发单击事件，因为它看起来隐藏在鼠标悬停上。正如蛮力回答一样尝试

$("#thumbs div").click(function(){             
        var toLoad = $(this).children('a').attr('href')+' #mainImage';
        $('#mainImage').fadeOut("fast",loadContent);
        window.location.hash = $(this).children('a').attr('href').substr(0,$(this).children('a').attr('href').length-5);
        function loadContent() {
            $('#mainImage').load(toLoad,'',showNewContent())
        }
        function showNewContent() {
            //Slider();
            $('#mainImage').fadeIn("1000");
            //Slider();
        }
        return false;
    });

并从前一个选择器中删除'#thumbs a'。你还能发布用拇指处理鼠标的css吗？

AJAX内容加载器仅适用于我的一半链接

1 个答案: