滑动面板打开点击

Question

.destination {
    width: 100%;
    height: 130vh;
    background-color: #f8f8f8;
    margin: 0 auto;
}

.destination-inner {
    margin: 0 auto;
    padding: 100px 0px 0 0;
}

.destination-inner h1 {
    font-family: 'Inter', sans-serif;
    font-weight: 300;
    font-size: 29px;
    color: #555555;
    text-transform: uppercase;
    text-align: center;
}

.destination-inner h1 span {
    font-weight: 600;
}

.destination-inner h2 {
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    font-size: 16px;
    color: #555555;
    text-transform: uppercase;
    text-align: center;
    padding-bottom: 25px;
}

.destination-inner h3 {
    list-style: none;
    color: #fff;
    font-family: 'Roboto', sans-serif;
    vertical-align: middle;
    font-size: 28px;
    font-weight: 300;
    text-transform: uppercase;
    line-height: 1.4;
    padding-top: 80px;
}

.destination-inner p {
    font-size: 16px;
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    line-height: 1.7;
    color: #555555;
    text-align: center;
    margin-bottom: 50px;
}

.destination-inner hr {
    width: 14%;
    color: #fe0103;
    margin-top: 50px;
    margin-bottom: 50px;
}

.destination-inner ul {
    max-width:90%;  
    padding: 0px 30px; 
    margin: 0 auto;
    text-align: center;
    padding:10px 25px;
    cursor: pointer;
    list-style: none;
}

.destination-inner li {
    background-color: #32374a;
    display: inline-block;
    width: 250px;
    height: 320px;
    cursor: pointer;
    transition: all 0.3s ease 0s;
    padding: 70px 40px;
    margin-right: 15px;
    list-style: none;
}

.destination-inner li a {
    text-decoration: none;
}

.destination-inner li:hover {
    background-color: #393F55;
    transition: all 0.3s ease 0s;
}

<section class="destination" id="travels">
         <div class="destination-inner">
              <h2>STEP 01</h2>
              
              <h1>Choose your <span>Destination</span></h1>
              <hr>
             <p>They are innovative and carefully researched and curated.<br> They guides are also hand picked, and are highly experienced, very often with a special expertise.<br> The vehicles are able to be adapted to more active days of touring.</p>
              <ul data-grid="Grid 3">
                  <li>
                      <a href="#">    
                      <h3>City & <br>Table Mountain</h3>
                      </a>
                  </li>
                  <li>
                      <a href="#">    
                      <h3>The Cape <br>Peninsula</h3>
                      </a>
                  </li>
                  <li>
                      <a href="#">    
                      <h3>The <br>Winelands</h3>
                      </a>
                  </li>
                  <li>
                      <a href="#">    
                      <h3>The <br>Overberg</h3>
                      </a>
                  </li>
              </ul>
          </div>
    </section>

我相信我们都很好。我正在尝试为块的部分创建内容滑动效果（请参阅附加的img）。

是否可以创建一些东西，当用户点击 4 个块中的任何一个块时，一个新的 4 个块部分会滑入以替换当前块？

在 JavaScript 方面我还是个婴儿，我一直在寻找 tuts 但没有运气。非常感谢您的帮助。

提前致谢。

Answer 1

我假设您正在尝试在这里实现一种向导类型的功能，例如从第 1 步到第 2 步到第 3 步等等，并最终显示一些结果。您可能还想反复执行这些步骤。

jQuery 智能向导 - http://techlaboratory.net/jquery-smartwizard 就是你所需要的。

您可以根据需要轻松自定义此插件。例如，当用户单击四张卡片中的任何一张时，您可以进行下一步。你所要做的就是简单地写这个：

$('#smartwizard').smartWizard("next");

当我们点击四张卡片中的任何一张时，您就可以编写此代码。因此，您可以为所有四张卡片提供相同的类名，并在点击时使用上述代码。

例如：

$(".card").click(function() { $('#smartWizard').smartWizard("next"); });

这个插件肯定会帮助你，并且会承担大部分开销，比如后退一步并进行更改。

如果您在实施方面需要任何帮助，请与我们联系，但是，该网站有非常有用的文档。

请注意，还有很多其他插件，我们也可以自己编写这段代码，但我真的很喜欢这个。

细节：你想在这里实现的动画，比如点击一张卡片会带来4张新卡片，在这里可以轻松实现。

您只需要编写插件网站上提到的 HTML。

最好， 苏米特