如何在使用jQuery单击特定链接时切换到特定选项卡面板？

Question

我有一个使用jQuery的选项卡面板，并且一切正常，除了选项卡内容中带有data-anchor的链接之外，该链接应切换到特定的选项卡。 选项卡切换有效，但不显示选项卡内容。

如何解决这个问题？

HTML：

<div class="tab-panels">
  <ul class="tabs">
    <li class="active" rel="panel1">panel1</li>
    <li rel="panel2" id="custpanel2">panel2</li>
    <li rel="panel3">panel3</li>
    <li rel="panel4">panel4</li>
  </ul>
  <div class="panel active" id="panel1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
  <div class="panel" id="panel2">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
  <div class="panel" id="panel3">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
  <div class="panel" id="panel4">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    <a href="custpanel2" data-anchor="#custpanel2">
      Click here
    </a>
  </div>
</div>

JS：

$('.tab-panels .tabs li').on('click', function(){
  var $panel = $(this).closest('.tab-panels');

  $panel.find('.tabs li.active').removeClass('active');
  $(this).addClass('active');

  var panelToShow = $(this).attr('rel');

  $panel.find('.panel.active').fadeOut(300, showNextPanel);

  function showNextPanel(){
    $(this).removeClass('active');

    $('#'+panelToShow).fadeIn(300, function(){
      $(this).addClass('active');
    })
  }
});

//Link inside tab content
$('[data-anchor="#custpanel2"]').on('click', function(e){
    e.preventDefault();
    var $panel = $(this).closest('.tab-panels');

    $panel.find('.tabs li.active').removeClass('active');
    $('.tabs li:nth-child(3)').addClass('active');

    var panelToShow = $(this).attr('rel');


    $panel.find('.panel.active').fadeOut(300, showNextPanel);

    function showNextPanel(){
      $(this).removeClass('active');

      $('#'+panelToShow).fadeIn(300, function(){
        $(this).addClass('active');
      })
    }
});

Answer 1

var panelToShow = $（this）.attr（'rel'）;
panelToShow的值是从名为“ rel ”的服装中检索的，并且链接没有“ rel ”属性，您可以在不修改逻辑的情况下解决问题，例如

的rel = “PANEL1”

Answer 2

$(this)在我猜想的函数中没有得到正确的元素，因此请使用以下代码。

function showNextPanel(){
    $('.tab-panels div.panel').removeClass('active');

    $('#'+panelToShow).fadeIn(300, function(){
        $(this).addClass('active');
    });
}

编辑

$('[data-anchor="#custpanel2"]').on('click', function(e){
    e.preventDefault();
    var $panel = $(this).closest('.tab-panels');

    $panel.find('.tabs li.active').removeClass('active');
    $('.tabs li:nth-child(3)').addClass('active');

    var panelToShow = $(this).attr('href');


    $panel.find('.panel.active').fadeOut(300, showNextPanel);

    function showNextPanel(){
      $('.tab-panels div.panel').removeClass('active');

      $('#'+panelToShow).fadeIn(300, function(){
        $(this).addClass('active');
      })
    }
});