Хранение активного класса в локальном хранилище при использовании начальной загрузки 4 вкладки

Question

У меня возникли некоторые проблемы со списком вкладок ниже:

      <ul class="nav nav-tabs" data-tabs="tabs" role="tablist">
                    <li class="nav-item">
                        <a class="nav-link active" href="{$PageUrl}" role="tab">View</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{$PageUrl}?action=edit" role="tab">Edit</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link"  href="{$PageUrl}?action=diff" role="tab">History</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link"  href="{$PageUrl}?action=print" role="tab">Print</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link"  href="{$PageUrl}?action=attr" role="tab">Attributes</a>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="dropdown2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
                            <div class="dropdown-menu" aria-labelledby="dropdown2">
                                <a class="dropdown-item" data-toggle="tab" href="#fat2" role="tab">@fat</a>
                                    <a class="dropdown-item" data-toggle="tab" href="#mdo2" role="tab">@mdo</a>
                            </div>
                    </li>
                </ul>

Все отображается нормально, но это отличается от того, как многие люди используют вкладки.У большинства примеров, которые я вижу, есть 'tab-content', и это показывает содержание для каждой вкладки.В моем случае я использую вкладки, чтобы связать альтернативные страницы все вместе.Вот тут и возникает моя проблема. При нажатии на вкладку «Редактировать» она действительно загружает страницу редактирования, но активный класс или вкладка «Вид» все еще активны.Я не могу заставить активный класс переключаться между вкладками.Я думаю, это потому, что страница перезагружается, поэтому удаляются активные данные и устанавливается значение по умолчанию.Как я могу обойти это и показать правильную активную вкладку после загрузки новой выбранной страницы?Спасибо за любую помощь!

Редактировать:

Ранее я пытался использовать это в нижней части моего тела без удачи:

$(function(){
var current = location.pathname;
$('#nav li a').each(function(){
    var $this = $(this);
    // if the current path is like this link, make it active
    if($this.attr('href').indexOf(current) !== -1){
        $this.addClass('active');
    }
})

})

Answer 1

Вот возможное решение:

<ul class="nav nav-tabs" data-tabs="tabs" role="tablist">
    <li class="nav-item">
        <a class="default nav-link" href="{$PageUrl}" role="tab">View</a>
    </li>
    <li class="nav-item">
        <a class="edit nav-link" href="{$PageUrl}?action=edit" role="tab">Edit</a>
    </li>
    <li class="nav-item">
        <a class="diff nav-link"  href="{$PageUrl}?action=diff" role="tab">History</a>
    </li>
    <li class="nav-item">
        <a class="print nav-link"  href="{$PageUrl}?action=print" role="tab">Print</a>
    </li>
    <li class="nav-item">
        <a class="attr nav-link"  href="{$PageUrl}?action=attr" role="tab">Attributes</a>
    </li>
    <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="dropdown2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
        <div class="dropdown-menu" aria-labelledby="dropdown2">
            <a class="dropdown-item" data-toggle="tab" href="#fat2" role="tab">@fat</a>
            <a class="dropdown-item" data-toggle="tab" href="#mdo2" role="tab">@mdo</a>
        </div>
    </li>
</ul>
<script>
$(function() {
    var action = (location.search.match(/(\^?|&)action=(.*?)($|&)/i) || [])[2]
    if(action) {
        $('a.nav-link.'+action).addClass('active')
    } else {
        $('a.nav-link.default').addClass('active')
    }
})
</script>

1. Не добавляет класс active ни к одной из вкладок по умолчанию.
2. Все ссылки на вкладках имеют свои действия в качестве класса, чтобы упростить его
3. При загрузке он отмечает запрос в адресе окна и соответственно устанавливает активный класс