Fix for nav-tabs Stop Working After jQuery Update

If your tabbed notebooks stopped working after a jQuery update then here's the fix.

First, you'll need some classes you didn't have before in your site.css

    .nav-tabs { border-bottom: 2px solid #DDD; }
    .nav-tabs > li > a {
        border: none;
        color: #666;
    }
    .nav-tabs > li.nav-item > a,
    .nav-tabs > li.nav-item > a:hover {
        border: none;
        color: #4285F4 !important;
        background: transparent;
        position: relative;
    }
    .nav-tabs > li.nav-item > a::after {
        content: "";
        background: #4285F4;
        height: 2px;
        position: absolute;
        width: 100%;
        left: 0px;
        bottom: -1px;
        transition: all 250ms ease 0s;
        transform: scale(0);
    }
    .nav-tabs > li.nav-item > a.active::after,
    .nav-tabs > li.nav-item:hover > a::after {
        transform: scale(1);
    }

    .card {
        box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
    }

Then you'll need to rearrange things on your tab sets.
Use the following rules.

1. Tabs
1. <ul> needs to be in a <div class="nav navbar">
2. <ul> needs <class="nav nav-tabs">
3. <li> no longer gets class="active"
4. <li> needs class="nav-item"
5. <a> tags in your <li> now get class="active show" if they are the active tab.
2. Tab Panes
1. tab panes go in a <div class="tab-content">
2. <div>s needs a class="tab-pane"
3. in <div> tags, fade needs in or your div will not show.

Here is a sample page:

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Index</h2>
<h2>Tabsperimentation</h2>
    <div class="nav navbar-default">
        <ul class="nav nav-tabs">
            <li class="nav-item"><a class="active show" data-toggle="tab" href="#TabA">GO TO TAB A</a></li>
            <li class="nav-item"><a data-toggle="tab" href="#TabB">GO TO TAB B</a></li>
            <li class="nav-item"><a data-toggle="tab" href="#TabC">GO TO TAB C</a></li>
        </ul>
    </div>

    <div class="tab-content">
        <div id="TabA" class="tab-pane fade in active">
            THIS IS TAB A
        </div>

        <div id="TabB" class="tab-pane fade in">
            THIS IS TAB B
        </div>

        <div id="TabC" class="tab-pane fade in">
            THIS IS TAB C
        </div>
    </div>