Question

我尝试使用jQuery Flip插件根据所选的菜单项翻转卡片。根据菜单项，卡背面的内容会有所不同。这可能吗？

我在github页面上使用jekyll模板。我认为您可以使用液体逻辑来确定要在卡片背面打印哪些内容，但不确定（新的）。任何关于如何设置它的想法都非常感谢。

<div id="card">
        <div class="front"> <!-- Front of Card -->

           <div id="home" class="col-md-12 main content-panel">

                    <div class="profile-pic">
                        <img src="{{ site.title_image }}" class="img-circle about-image" height="150" width="150" alt="{{ site.title }}" />
                    </div>

                    <h1 class="header author-header" itemprop="headline">{{ site.title }}</h1>

                    <div class="author-text">
                        {{ site.title_description }}
                    </div>
                    {% include nav.html %}

                    {% include social_links.html %}            

                </div> 

              </div> 
              <div class="back"> <!-- Back of Card -->

                <div class="col-md-12 main content-panel">  

           <p>Back of card</p> 
         {% include nav.html %}

      </div>

  </div>

jQuery的：

 $("#card").flip({
  axis: 'y',
  trigger: 'click'
});

这可以通过点击卡片来翻转卡片，但我希望导航/菜单项能够决定卡片背面的内容。寻找实现这一目标的最佳方法。

Answer 1

如果您的page1包含content1，page2包含content2，并且您希望在第2页显示content2，则可以使用{{content}}标记。如果要在第2页上显示content1，则必须使用for语句循环浏览导航项。

这就是理论......现在我将使用3个页面设置实际代码：索引文件，content1文件和content2文件。

您的content1.md（和content2.md）将如下所示：

----
title: 'Content 1'
intro: 'Lorem ipsum dolor...'
----
Lorem ipsum dolor sit amet, consectetur adipiscing elit.

您的index.html（或_includes中的navigation.html）如下所示：

<div class="container-fluid"> 

  <div id="card">

     <div class="my-card">
          <div class="front"> 
            <ul class="list-inline">
              {% for page in site.pages %}
              <li><a id="{{ page.title | replace: ' ', '-' }}" href="#">{{ page.title }}</a></li>
              {% endfor %} 
          </div> 
          <div id="contentContainer">
            <div class="back">
              {% for page in site.pages %}
              <p id="{{ page.title | replace: ' ', '-' }}">{{ page.intro }} <a href="{{ page.url }}">Read more</a></p>
              {% endfor %}
            </div>
          </div>

     </div>    
  </div>    
</div>

快乐的编码！

jQuery Flip - 翻转一个div，但根据点击的链接显示不同的内容

1 个答案: