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');
      })
    }
});

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

2 个答案: