Сохранение активного класса в локальном хранилище при использовании вкладок bootstrap 4

ProgramBox

Сохранение активного класса в локальном хранилище при использовании вкладок bootstrap 4

Post author:admin
Запись опубликована:18 мая, 2023
Post category:Вопросы по программированию

#javascript #jquery #tabs #bootstrap-4

#javascript #jquery #вкладки #bootstrap-4

Вопрос:

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

       <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');
    }
})

})

1. Я думаю, вы хотите сложный способ. Если я правильно понял, вы перезагружаете всю страницу содержимым новой вкладки и хотите также сделать ее активной. Верно? Если код в {$PageUrl} также генерирует этот html-фрагмент, вам следует соответствующим образом сгенерировать active класс для соответствующей вкладки. Даже если вы вызываете какой-либо другой серверный код для этого, вы должны передать эту информацию в эту часть кода.

2. Хорошо, понял, вы не можете (не хотите) изменять код на стороне сервера. Я не знаю эту cms. Вопрос: как выглядит адресная строка вашего браузера, например, после нажатия кнопки Редактировать ? Все еще содержит ?action=edit параметр запроса (использует ли он перенаправление)?

3. Он просто добавляет текущий URL, поэтому перенаправления нет. ?действие= редактировать указано в URL. Я изучил изменение кода на стороне сервера и был потерян. Я знаю, что это можно сделать с помощью jQuery, но после многих неудачных попыток я пришел сюда за помощью.

4. Тогда вот решение: 1) не добавляйте active в свой фрагмент. 2) добавьте обработчик событий для загрузки страницы (или скрипт просто в конце страницы), который проверяет значение действия и добавляет active класс к элементу propet.

Ответ №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(/(^?|amp;)action=(.*?)($|amp;)/i) || [])[2]
    if(action) {
        $('a.nav-link.' action).addClass('active')
    } else {
        $('a.nav-link.default').addClass('active')
    }
})
</script>

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