如何在使用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');
      })
    }
});