Question

我正在为我的网站使用jquery标签。现在我想在某些条件下移动到最后一个标签。为此我写了一些代码但没有用。我的标签代码是：

<div class="wizard">
        <a href="#step1" role="tab" id="tab1" data-toggle="tab" class="current"  style="pointer-events: none;"><span class="hidden-xs">Step</span> 1</a>
        <a href="#step2" role="tab" id="tab2" data-toggle="tab"  style="pointer-events: none;"><span class="hidden-xs">Step</span> 2</a>
        <a href="#step3" role="tab" id="tab3" data-toggle="tab"  style="pointer-events: none;"><span class="hidden-xs">Step</span> 3</a>
        <a href="#step4" role="tab" id="tab4" data-toggle="tab"  style="pointer-events: none;"><span class="hidden-xs">Step</span> 4</a>
      </div>

我正试图从step1转移到step4。我正在使用此代码移动。我正在调用此函数change('step1');。但是当我尝试这样的时候{ {1}}它不起作用。它移动到第二步而不是第四步。

change('step4');

其他一些代码：

 jQuery('a.btn').each(function () {
      jQuery('.wizard a[data-toggle="tab"]').removeClass('current');
      jQuery('.wizard a[href="#'+hrf+'"]').click();

  });

Answer 1

你不需要Change函数中的每个循环。

function change(hrf){
    jQuery('.wizard a[data-toggle="tab"].current').removeClass('current');
    jQuery('.wizard a[href="#'+hrf+'"]').click();
}

<强>被修改

在bootrap

中查看此代码

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
     e.target // newly activated tab
     e.relatedTarget // previous active tab
});

检查：http://getbootstrap.com/javascript/#tabs

Answer 2

您不必尝试解决触发点击移动到特定标签的问题，

您可以使用active选项将特定标签设置为有效标签。

您可以通过将有效设为-1轻松导航到最后一个标签。

＆＃13;

$("#tabs").tabs();

$("#tabs").tabs("option", "active", -1);

＆＃13;

<link href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Nunc tincidunt</a>
    </li>
    <li><a href="#tabs-2">Proin dolor</a>
    </li>
    <li><a href="#tabs-3">Aenean lacinia</a>
    </li>
  </ul>
  <div id="tabs-1">
    <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper
      leo. Vivamus sed magna quis ligula eleifend adipiscing.</p>
  </div>
  <div id="tabs-2">
    <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean
      aliquet fringilla sem.</p>
  </div>
  <div id="tabs-3">
    <p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia
      nostra, per inceptos himenaeos..</p>

  </div>
</div>

＆＃13;

单击jQuery上的“移动到上一个”选项卡

2 个答案: