Question

我使用旋转木马创建了一个缩略图图库。每个图库对应一个城市，加载功能用于将图库替换为不同的城市。

例如：

<div class="replace">
    <div class="prev_box"><div class="prev"><p> < </p></div></div>
    <div id="thumbs">
        <div class="pic"><img src="NYC/img1.jpg" alt="">  </div>
        <div class="pic"><img src="NYC/img2.jpg" alt=""></div>
        <div class="pic"><img src="NYC/img3.jpg" alt=""></div>
    </div>
    <div class="next_box"><div class="next"><p> > </p></div></div>
</div>

然后在底部实现轮播和加载功能，以在必要时替换图库。

<script>
    $(document).ready(function() {
        $( ".NYC" ).click(function() {
            $(".replace").load( "Galleries.html #NYC" );
            $(".prevgallery").removeClass('active');
            $(".NYC").addClass('active');
        });
        $( ".LA" ).click(function() {
            $(".replace").load( "Galleries.html #LA" );
            $(".prevgallery").removeClass('active');
            $(".LA").addClass('active');
        });
    });
</script>

简单的轮播通过“光滑”实现如下：

<script type="text/javascript">
    $(document).ready(function(){
        $('#thumbs').slick({
            infinite: false,
            slidesToScroll: 3,
            slidesToShow: 7,
            prevArrow: $('.prev_box'),
            nextArrow: $('.next_box')
        });
    });
</script>

CSS如下所示，以保持图像的大小：

#thumbs {
    display: inline-block;
    height: 90px;
    width: 670px;
    border: 1px solid red;
}

#thumbs div .pic {
    height: 80px;
    margin: 5px 0px 5px 0px;
    border: 1px solid green;
}

#thumbs div .pic img {
    height: 100%;
    width: auto;
    cursor: pointer;
}

CSS代码适用于原始城市，例如纽约市。但奇怪的是，当洛杉矶等另一个城市被加载到html文件中以替换“替换”div时，CSS文件似乎不会影响新的div。

以下代码可在Galleries.html

中找到

<div class="replace" id="LA">
    <div class="prev_box"><div class="prev"><p> < </p></div></div>
    <div id="thumbs">
        <div class="pic"><img src="LA/img1.jpg" alt=""></div>
        <div class="pic"><img src="LA/img2.jpg" alt=""></div>
        <div class="pic"><img src="LA/img3.jpg" alt=""></div>
    </div>
</div>

Answer 1

尝试将CSS规则从div .pic更改为div.pic

#thumbs div.pic { 
  /* .... */
}

和

#thumbs div.pic img { 
  /* .... */
}

jquery .load（）调用然后css不工作

1 个答案: