Question

以下是演示页面：http://froitheme.tumblr.com/

没有tumblr标签的JSfiddle：https://jsfiddle.net/3ggvmy40/7/

[这个JSfiddle由于某种原因不能正常工作，即使演示页面是。]

无论如何，我正在尝试创建一个图库样式索引页面，左侧有缩略图帖子，点击一个缩略图后右侧有完整帖子。

如您所见，点击时只显示最新的帖子，而上一篇文章保持空白。

请帮忙！ Tumblr使用{PostID}标签来区分呈现为长数字序列的帖子，这就是我想要确定的目标，以确保一次只显示一个帖子，并且缩略图与完整帖子相对应，虽然这只适用于最新的帖子而且没有任何内容。

JS：

$('#link').click(function(){
    var target = "#" + $(this).attr("data-target");
    $(".posting").not(target).hide();
    $(target).fadeToggle("slow");
});

$('.posting').hide();

HTML：

    <section id="content">
        {block:Posts}
            {block:Photo}
            <a href="#" id="link" data-target="{PostID}">
            <div class="post">
            <img src="{PhotoURL-250}" />
            </div>
            </a>
            {/block:Photo}
        {/block:Posts}
    </section>

    <section id="side">
        <div id="nav">
            this will go here!
        </div>
        {block:Posts}
            {block:Photo}
            <div class="posting" id="{PostID}">
            <img src="{PhotoURL-400}" />
            </div>
            {/block:Photo}
        {/block:Posts}
    </section>

CSS：

    #content {
        float: left;
        width: 740px;
        height: 520px;
        background: transparent;
        overflow-x: hidden;
        overflow-y: scroll;
    }

    .post {
        opacity: 0.5;
        float: right;
        margin: 0px 18px 17px 0px;
        padding: 50px;
        width: 250px;
        height: 150px;
        background: #000;
        border-bottom: 1px solid #000;
        transition: all 1s ease-in-out;
            -webkit-transition: all 1s ease-in-out;
            -moz-transition: all 1s ease-in-out;
            -o-transition: all 1s ease-in-out;
    }

    #side {
        float: right;
        margin-left: 16px;
        width: 480px;
        height: 520px;
        background: #000;
    }

    .posting {
        position: absolute;
        padding: 40px;
        width: 400px;
        height: 480px;
        overflow-y: scroll;
        overflow-x: hidden;
        z-index: 999;
    }

    #nav {
        position: absolute;
        padding: 40px;
        width: 400px;
        height: 480px;
        z-index: 2;
    }

感谢您实际点击此内容！

Answer 1

问题是您使用的是重复的ID：

<a href="#" id="link"

改用class：

<a href="#" class="link"

和

$('.link').click(function(){

Tumblr主题：通过单击缩略图照片切换显示div

1 个答案: