javascript - 在 javascript 标签中显示分页

Question

我有这个 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
        }
    });
});

Answer 1

这$('#' + $(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();
  });

});