使用带有活动 class 的 js 切换选项卡

Question

我想在 select 当前选项卡的选项之一时切换选项卡。下一个选项卡内容会进行切换，但不会切换选项卡本身。我遵循了这个例子 jsfiddle.net/ah97fo5m/。但是不能用我的代码来实现。我在这里做错了什么？

提前致谢。

这是代码 https://codepen.io/mahirq8/pen/RwNWdRp?editors=1010

<head>

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>

 <div class="modal-body" id="tabs">
                <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
                    <li class="nav-item">
                        <a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">Year</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">Make</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false">Model</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" id="pills-vo-tab" data-toggle="pill" href="#pills-vo" role="tab" aria-controls="pills-vo" aria-selected="false">Version/Option</a>
                    </li>
                    <!-- <li class="nav-item">
                        <a class="nav-link" id="pills-location-tab" data-toggle="pill" href="#pills-location" role="tab" aria-controls="pills-location" aria-selected="false">Location</a>
                    </li> -->
                </ul>

                <div class="tab-content" id="pills-tabContent">

                    <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">

                        <div class="d-flex justify-content-center">


                            <ul class="tire-selector">
                                <li><a data-toggle="pill" href="#pills-profile" class="list-group-item nexttab">2020</a></li>
                                <li><a data-toggle="pill" href="#pills-profile" class="list-group-item nexttab">2019</a></li>
                                <li><a data-toggle="pill" href="#pills-profile" class="list-group-item nexttab">2018</a></li>
                            </ul>
                        </div>
                    </div>

                    <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">
                        <div class="d-flex justify-content-center">
                            <ul class="tire-selector">
                                <li><a href="#" class="list-group-item">Acura</a></li>
                                <li><a href="#" class="list-group-item">Alfa</a></li>
                                <li><a href="#" class="list-group-item">Aston</a></li>
                                <li><a href="#" class="list-group-item">Audi</a></li>
                                <li><a href="#" class="list-group-item">BMW</a></li>
                            </ul>
                        </div>
                    </div>

                    <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">
                        <div class="d-flex justify-content-center">
                            <ul class="tire-selector">
                                <li><a href="#" class="list-group-item">Class-XL</a></li>
                            </ul>
                            <ul class="tire-selector">
                                <li><a href="#" class="list-group-item">Class-C</a></li>
                            </ul>
                            <ul class="tire-selector">
                                <li><a href="#" class="list-group-item">Class-B</a></li>
                            </ul>
                            <ul class="tire-selector">
                                <li><a href="#" class="list-group-item">Class-A</a></li>
                            </ul>
                        </div>
                    </div>

                    <div class="tab-pane fade" id="pills-vo" role="tabpanel" aria-labelledby="pills-vo-tab">
                        <div class="d-flex justify-content-center">
                            <ul class="tire-selector">
                                <li><a href="#" class="list-group-item">Manual</a></li>
                            </ul>
                            <ul class="tire-selector">
                                <li><a href="#" class="list-group-item">Auto</a></li>
                            </ul>

                        </div>
                    </div>

                    <!-- <div class="tab-pane fade" id="pills-location" role="tabpanel" aria-labelledby="pills-location-tab">
                        <div class="d-flex justify-content-center">
                            <div class="form-inline">
                                <div class="input-group mx-3">
                                    <input type="text" class="form-control" placeholder="Full Address or ZIP" aria-label="Full Address or ZIP" aria-describedby="basic-addon2">
                                    <div class="input-group-append">
                                        <button class="btn btn-outline-primary" type="button">Go</button>
                                    </div>
                                </div>
                                <span>OR</span>
                                <button type="submit" class="btn btn-primary mx-3">Use Current Location</button>
                            </div>

                        </div>
                    </div> -->

                </div>
            </div>
            <div class="modal-footer">
                <!-- <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> -->
                <button type="button" class="btn btn-primary a-none"> <a href="{% url 'search' %}">Save & Search</a></button>
            </div>

$("#tabs").tabs();
$(".nexttab").click(function() {
    $("#tabs").tabs("select", this.hash);
});


# OR

$("#tabs").tabs();
$(".nexttab").click(function() {
    var selected = $("#tabs").tabs("option", "selected");
    $("#tabs").tabs("option", "selected", selected + 1);
});

Answer 1

如果您只想在选择列表项之一时切换选项卡，您只需要弄清楚如何在同级项之间切换 css classes。

我以年份标签和汽车品牌标签的切换为例

首先，您需要将一些 class（在您的示例中为年份选项）分配给将链接到侦听器的 li 项。

<ul class="tire-selector">
  <li><a data-toggle="pill" href="#pills-profile" class="list-group-item year-option">2018</a></li>
<li><a data-toggle="pill" href="#pills-profile" class="list-group-item year-option">2019</a></li>
 .......
 .......
</ul>

JS

$(".year-option").click(function() {
  // first remove the active class from all the nav-links
  $('.nav-link').removeClass('active');
  // then apply active class on the target nav-link's id
  $('#pills-profile-tab').addClass('active')

  // same with the list containers, here you need to switch two classes
  $('tab-pane').removeClass('show active')
  $('pills-profile').addClass('show active')
});

当谈到 ui 元素在某些操作中显示和隐藏自身时，在大多数情况下，这是因为添加和删除了一些 class(es)。只需查找那些 classes 并在其兄弟姐妹之间切换即可。

使用带有活动 class 的 js 切换选项卡

Switching tabs using js with active class

html

javascript

jquery

tabs