在 JavaScript 选项卡中显示分页

show pagination in a javascript tabs

本文关键字：显示 分页 JavaScript 选项      更新时间：2023-09-26

我有这个javascript代码，允许我显示和隐藏选项卡，但我的问题是当用户单击最后一个选项卡中的链接时，它会显示第一个。以另一种方式，我的点击结果被另一个选项卡隐藏。

这是我的JavaScript

$(document).ready(function() {
    $("#content div").hide(); // Initially hide all content
    $("#tabs li:first").attr("id","current"); // Activate first tab
    $("#content div:first").fadeIn(); // Show first tab content
    $('#tabs a').click(function(e) {
        e.preventDefault();
        if ($(this).closest("li").attr("id") == "current"){ //detection for current tab
         return       
        }
        else{             
        $("#content div").hide(); //Hide all content
        $("#tabs li").attr("id",""); //Reset id's
        $(this).parent().attr("id","current"); // Activate this
        $('#' + $(this).attr('name')).fadeIn(); // Show content for current tab
        }
    });
});

我认为$('#' + $(this).attr('name')).fadeIn();你的问题所在。这是一些非常混乱的代码。没有看到您的标记，我什至不确定您要做什么，但事实并非如此。无论如何，您最终尝试这样做，因为您的解决方案一开始就很混乱。请参阅下面我的示例。我只做必要的事情...无需向所有内容添加 ID 和属性即可隐藏/显示适当的内容。

这是一种轻松简单的方法来完成您正在寻找的内容。现场演示（点击这里）。

示例标记：

<ul class="tabs">
    <li>
      <a>Tab1</a>
    </li>
    <li>
      <a>Tab2</a>
    </li>
    <li>
      <a>Tab3</a>
    </li>
  </ul>
  <div class="content">
    <div>Tab1 Content</div>
    <div>Tab2 Content</div>
    <div>Tab3 Content</div>
  </div>

JavaScript：

$(document).ready(function() {
  $(".content div").not(':first').hide();
  var $content = $('.content');
  $('.tabs a').click(function() {
    var index = $(this).parent().index();
    var $selected = $('div:eq('+index+')', $content);
    $('div', $content).not($selected).hide();
    $selected.show();
  });
});
相关文章：