1

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

即使我将链接切换到相反的部分，它们也只能#menu在#thumbs. 我花了几个小时看这个并切换东西，但仍然无法弄清楚！

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

到目前为止，您可以在这里看到完整的网站：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;
    });
4

1 回答 1

0

我认为链接标签上没有触发点击事件，因为它看起来在鼠标悬停时被隐藏。就像蛮力回答一样尝试

$("#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吗？

于 2013-02-03T21:57:38.373 回答