Question

我有一个引导导航丸sample here被绘制为，

<ul class="nav nav-pills nav-stacked">
        <li class="active"><a data-toggle="pill" href="#sec1"><b>Section 1</b></a></li>
        <li><a data-toggle="pill" href="#sec2"><b>Section 2</b></a></li>
        <li><a data-toggle="pill" href="#sec3"><b>Section 3</b></a></li>
</ul>

一旦用户点击标签内容中的下一个按钮，我就可以转到下一个标签，方法是使用jquery作为given here。有没有其他最简单的方法，而不是使用angularjs或任何其他方法的示例？

Answer 1

您可以在下一个按钮中添加一个班级.next，然后使用标签ID和href进行操作： -

＆＃13;

$(document).ready(function() {
  $(".next").click(function() {
    var tab = $(this).closest('.tab-pane');
    $('#' + tab[0].id + ', .nav-pills li').removeClass('active');
    $('.nav-pills li a[href="#' + tab.next()[0].id + '"]').parent().addClass('active');
    tab.next().addClass('active');
  });
});

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-xs-3" style="padding-right: 0px;">
      <ul class="nav nav-pills nav-stacked">
        <li class="active"><a data-toggle="pill" href="#sec1"><b>Section 1</b></a>
        </li>
        <li><a data-toggle="pill" href="#sec2"><b>Section 2</b></a>
        </li>
        <li><a data-toggle="pill" href="#sec3"><b>Section 3</b></a>
        </li>
      </ul>
    </div>
    <div class="col-xs-9">
      <div class="tab-content">
        <div id="sec1" class="tab-pane active">
          <p>Section 1 tab 1</p>
          <div class="text-right">
            <button class="btn btn-primary btn-sm next">Next</button>
          </div>
        </div>
        <div id="sec2" class="tab-pane">
          <p>Section 2 tab 2</p>
          <div class="text-right">
            <button class="btn btn-primary btn-sm next">Next</button>
          </div>
        </div>
        <div id="sec3" class="tab-pane">
          <p>Section 3 tab 3</p>
          <div class="text-right">
            <button class="btn btn-primary btn-sm">Save</button>
          </div>
        </div>
      </div>
    </div>
  </div>

</div>

＆＃13;

通过bootstrap导航丸导航的简单方法

1 个答案: