jQuery 在时间戳后单击来自 nav-pills 的下一个锚标记

Question

我正在尝试使用 jquery 单击下一个导航链接。我正在使用带有 Jquery 3.4.1 的 Bootstrap 4。我正在使用 Vertical Nav Pills，我想在一段时间后激活它。

<!-- Tabs nav -->
        <div class="nav nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
            <a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">
            <div class="categoryBox">
                <img src="https://dummyimage.com/240x150/ff6500/fff">
                <p>Real Estate</p>
            </div>    
            </a>

            <a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">
            <div class="categoryBox">
                <img src="https://dummyimage.com/240x150/ff6500/fff">
                <p>eCommerce</p>
            </div>
            </a>

            <a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false">
            <div class="categoryBox">
                <img src="https://dummyimage.com/240x150/ff6500/fff">
                <p>Fashion Photo Editing</p>
            </div>
            </a>

            <a class="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false">
            <div class="categoryBox">
                <img src="https://dummyimage.com/240x150/ff6500/fff">
                <p>Furniture Photo Editing</p>
            </div>
            </a>

        </div>

jquery

jQuery(document).ready(function(e) {

    var click1 = 0;
    setInterval(function(){
        if(jQuery('.nav-pills .nav-link').length == click1)
        {
            click1 = 0; 
        }           
        jQuery('.nav-pills .nav-link:eq( '+click1+' ) a').trigger('click');
        click1 ++;  

    },500);

});

我不确定为什么它不起作用。请协助。

Answer 1

正如我在评论中提到的，选择器没有选择正确的元素。

jQuery('.nav-pills .nav-link:eq( '+click1+' ) a').trigger('click');

将选择具有 .nav-link 类的元素的<a>-tag。由于 .nav-link 元素本身就是 <a> 标记，您只需将其从末尾移除即可：

function toggleActiveLink() {
  var interval = setInterval(function(){
    if(jQuery('.nav-pills .nav-link').length == click1)
    {
      click1 = 0; 
    }           
    jQuery('.nav-pills .nav-link:eq( '+click1+' )').trigger('click');
    click1 ++;  

  },500);
  return interval;
}

var click1 = 0;
var activeLinkInterval = toggleActiveLink();

$('.nav-link').on('mouseenter', function() {
  clearInterval(activeLinkInterval);
}).on('mouseleave', function() {
  activeLinkInterval = toggleActiveLink();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="nav nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
  <a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">
    <div class="categoryBox">
      <img src="https://dummyimage.com/240x150/ff6500/fff">
      <p>Real Estate</p>
    </div>
  </a>

  <a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">
    <div class="categoryBox">
      <img src="https://dummyimage.com/240x150/ff6500/fff">
      <p>eCommerce</p>
    </div>
  </a>

  <a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false">
    <div class="categoryBox">
      <img src="https://dummyimage.com/240x150/ff6500/fff">
      <p>Fashion Photo Editing</p>
    </div>
  </a>

  <a class="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false">
    <div class="categoryBox">
      <img src="https://dummyimage.com/240x150/ff6500/fff">
      <p>Furniture Photo Editing</p>
    </div>
  </a>

</div>