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

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

我在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>  

---

这可以通过点击卡片来翻转卡片，但我希望导航/菜单项可以指示卡片背面的内容。正在寻找实现这一点的最佳方法。

如果您有带有content1的page1和带有content2的page2，并且您希望在page2上显示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.

<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>

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

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

<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>

{site.pages%中的页面为%s}

{%endfor%}
{site.pages%中的页面为%s}
{{page.intro}
{%endfor%}

---

快乐编码

我能够让功能正常工作。现在，我们正在寻找将这些内容引入index.html的最佳方法。我会在includes文件夹中创建一个content1.html和一个content2.html，然后使用{%include content1.html%}将它们带进来。在liquid中，有没有一种方法可以说“如果单击了content1链接，则显示{content1}其他内容如果单击了content2…”谢谢，Joost！开始更好地理解液体是如何工作的。