jquery - 如何使用 jquery 和 css 制作像 Tabs 和 Pills 这样的引导程序

Question

首先我知道很多人会质疑为什么我不使用引导药丸并在几秒钟内完成它，原因是我们不允许使用引导程序。现在我的问题是我想做一个引导程序我已经在波纹管小提琴中制作的药丸，现在我需要知道如何使用 jquery 来更改活动类并显示必要的内容窗格，在我的代码中，我有三个部分，即“今天、明天和昨天”，我会喜欢根据用户单击的选项显示。您可以在小提琴链接选项卡中找到我的详细代码小提琴感谢您的帮助

   $(document).ready(function() {

  $('#yes, #tomo').click(function() {
    $(this).removeClass('hoverEffect');
    $(this).addClass("c-active");
  });

  $('.yesterday, .today, .tomorrow').hover(function() {
    if (!$(this).hasClass('c-active')) {
      $(this).addClass('hoverEffect');
    }
  }, function() {
    if ($(this).hasClass('hoverEffect')) {
      $(this).removeClass('hoverEffect');
    }
  });
});

标签： jquerycss

Answer 1

基于您的代码的简单实现：

$(document).ready(function () {
    $('.nav-pill-item').click(function (e) {
        e.preventDefault();

        if ($(this).hasClass('c-active')) {
            return;
        }
        
        $('.nav-pill-item').removeClass('c-active');

        $('.content-pill').hide();

        $($(this).data('target')).fadeIn();

        $(this).addClass('c-active');
    });
});

.nav-pill-item {
    width: 31.33%;
    margin: 10px, 15px;
    color: #424242;
    float: left;
    margin-right: 3%;
    text-align: center;
    padding-top: 8px;
    padding-bottom: 8px;
    font-weight: bold;
    font-size: 16px;
    cursor: pointer;
    box-sizing: border-box;
}

.nav-pill-item:hover {
    border-radius: 5px;
    background: #eee;
}

#nav-tomorrow {
    float: right;
    margin-right: 0;
}

#nav-today {
    margin-right: 0;
}

.calender .c-active {
    border-radius: 5px;
    color: #fff;
    background: #e2231a;
    padding-top: 5px;
    padding-bottom: 6px;
    border-top: 5px solid #2d0705;
}

.calender {
    margin-bottom: 30px !important;
    height: 50px;
}


/* Mobile friendly table start */

.contentTable {
    background-color: #ffffff;
    border-color: #ffffff;
    font-size: 13px;
    width: 100%;
    color: #323232;
}

.contentTable>thead {
    text-align: center !important;
    color: whitesmoke;
    background-color: #E2231A;
    font-size: 14px;
    font-weight: bold;
    text-transform: capitalize;
}

.table-hover tbody tr:hover td,
.table-hover tbody tr:hover th {
    background-color: #feffbf;
}

#content-yesterday,
#content-tomorrow {
    display: none;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

<div class="row prediction-tip-wrap">
    <section>
        <div class="col-md-12 calender">
            <div id="nav-yesterday" class="nav-pill-item" data-target="#content-yesterday">Yesterday</div>
            <div id="nav-today" class="nav-pill-item c-active" data-target="#content-today">Today</div>
            <div id="nav-tomorrow" class="nav-pill-item" data-target="#content-tomorrow">Tomorrow</div>
        </div>
    </section>
    <!--Mobile friendly table start-->
    <section id="content-today" class="content-pill">
        <table class="table table-striped table-hover contentTable ">
            <thead>
                <tr>
                    <td style="width: 10%;">Country</td>
                    <td style="width: 25%;">Subject</td>
                    <td style="width: 26%;">Courses</td>
                </tr>
            </thead>
            <tbody style="text-align: center!important;">
                <tr style="height: 21px;">
                    <td><span>FRA</span></td>
                    <td><span>Mathematics </span></td>
                    <td><span> Advance math </span></td>
                </tr>
                <tr style="height: 21px;">
                    <td><span>SPA</span></td>
                    <td><span>English</span></td>
                    <td><span>Literature</span></td>
                </tr>
            </tbody>
        </table>
    </section>
    <section id="content-tomorrow" class="content-pill">
        <table class="table table-striped table-hover contentTable ">
            <thead>
                <tr>
                    <td style="width: 10%;">Country</td>
                    <td style="width: 25%;">College</td>
                    <td style="width: 26%;">Names</td>
                </tr>
            </thead>
            <tbody style="text-align: center!important;">
                <tr style="height: 21px;">
                    <td><span>Bra</span></td>
                    <td><span>some info </span></td>
                    <td><span> some info </span></td>
                </tr>
                <tr style="height: 21px;">
                    <td><span>TNT</span></td>
                    <td><span>English</span></td>
                    <td><span>some info</span></td>
                </tr>
            </tbody>
        </table>
    </section>
    <section id="content-yesterday" class="content-pill">
        <table class="table table-striped table-hover contentTable ">
            <thead>
                <tr>
                    <td style="width: 10%;">Education</td>
                    <td style="width: 25%;">Subject</td>
                    <td style="width: 26%;">Courses</td>
                </tr>
            </thead>
            <tbody style="text-align: center!important;">
                <tr style="height: 21px;">
                    <td><span>Degree</span></td>
                    <td><span>Mathematics </span></td>
                    <td><span> some info </span></td>
                </tr>
                <tr style="height: 21px;">
                    <td><span>SPA</span></td>
                    <td><span>English</span></td>
                    <td><span>Literature</span></td>
                </tr>
            </tbody>
        </table>
    </section>
    <!--Mobile friendly table end-->
</div>