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

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'
});

这可以通过单击卡片来翻转卡片，但我希望 nav/menu 项目指示卡片背面的内容。寻找实现此目标的最佳方法。

Answer 1

如果您的 page1 包含 content1，page2 包含 content2，并且您想要在 page2 上显示 content2，您只需使用 {{ content }} 标签即可。如果您想在 page2 上显示 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 翻转 - 翻转一个 div，但根据点击的 link 显示不同的内容

jQuery Flip - flip one div, but show different content based on link clicked

jquery

flip

liquid

jekyll