Question

我正在努力用jquery实现一个标签系统（不是分页系统），它将像轮播一样工作

这是代码段：

<div class="tab">
    <p>Tab 1</p>
</div>

<div class="tab">
    <p>Tab 2</p>
</div>

<div class="tab">
    <p>Tab 3</p>
</div>

<div class="tab">
    <p>Tab 4</p>
</div>

上面可能有尽可能多的来自后端的数据，不仅有4个标签。

所以我正在尝试实现，当页面加载时，将显示前两个数据/选项卡。当用户单击第二个选项卡时，应该显示第二个选项卡和第三个选项卡，以便用户可以单击第三个选项卡导航第四个选项卡。例如，如果用户单击第4个标签，则应该显示第4个和第5个标签。同样，每个下一个选项卡都应执行相同的操作。

例如，页面加载后，

网络将在下面显示此内容

tab 1 | tab 2

所以，如果我点击tab 2

它应该显示如下：

tab 2 tab 3

，然后单击tab 3

它应该显示如下：

tab 3 tab 4

所以，如果我点击tab 4

它应该显示

tab 4 tab 5

同样，每个下一个制表符都应具有相同的行为。

有人可以帮我用jquery完成它吗？

我尝试了很多，但是每次尝试都失败了

Answer 1

您可以尝试一下：每次点击都会显示下一个标签。如果您也想进行反向遍历，请告诉我。

$(document).ready(function () {
            const tabs = $("#tabs");
            // To show first two tabs
            $(tabs).children(".tab").slice(0, 2).show();
    
            $(".tab").click(function () {
              if ($(this).is(":first-child") || $(this).is(":last-child")) {
                return false;
              }
    
              // If you want to swtich tabs back
              if (!$(this).prev().is(":visible")) {
                $(this).next().css("display", "none");
                $(this).prev().css("display", "block");
                return;
              }
    
              $(this).prev().css("display", "none");
              $(this).next().css("display", "block");
            });
          });

<html>
     <head>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
     </head>
      <body>
        <style>
          .tab {
            display: none;
          }
        </style>
        <div id="tabs">
          <div class="tab">
            <p>Tab 1</p>
          </div>
    
          <div class="tab">
            <p>Tab 2</p>
          </div>
    
          <div class="tab">
            <p>Tab 3</p>
          </div>
    
          <div class="tab">
            <p>Tab 4</p>
          </div>
        </div>
      </body>
    </html>

jQuery隐藏/显示基于动态数据的点击

1 个答案: