@Marina9456

Как сделать чтобы активной была та вкладка (таб), на которую нажали перед обновлением страницы?

При нажатии на ссылку страница обновляется, открывается то что мне надо, НО сразу же 1 вкладка становится активной. Как сделать чтобы активной была та вкладка, на которую нажали или посоветуйте другой пример.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Документ без названия</title>
</head>
<style>
  #tabs {
    margin: 10px 0;
}
    .tabs-nav {
        overflow: hidden;
        margin: 0;
        padding: 0;
    }
        .tabs-nav li {
            display: block;
            float: left;
            padding: 0;
            list-style: none;
        }    
        .tabs-nav a {
            display: block;
            padding: 10px 20px;
            border-top: 1px solid #ccc;  
            border-bottom: 1px solid #ccc;
            border-left: 1px solid #ccc;
            background: #fbfbfb; 
            font-size: 16px;
            text-decoration: none;
            text-align: center;
            color: #999;
        }        
        .tabs-nav li:first-child a {
            border-radius: 5px 0 0 0; 
        }
        .tabs-nav li:last-child a {
            display: block;
            border-right: 1px solid #ccc;
            border-radius: 0 5px 0 0; 
        }
        .tabs-nav a.active {
            border-bottom: 1px solid #fff;
            background: #fff;
            color: #000;
        }    
    .tabs-items {
        border: 1px solid #ccc;
        border-radius: 0 5px 5px 5px;
        background: #fff;
        margin: -1px 0 0 0;
    }
    .tabs-item {
        padding: 15px;
    }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(function() {
    var tab = $('#tabs .tabs-items > div'); 
    tab.hide().filter(':first').show(); 
    
    // Клики по вкладкам.
    $('#tabs .tabs-nav a').click(function(){
        tab.hide(); 
        tab.filter(this.hash).show(); 
        $('#tabs .tabs-nav a').removeClass('active');
        $(this).addClass('active');
        return false;
    }).filter(':first').click();

    // Клики по якорным ссылкам.
    $('.tabs-target').click(function(){
        $('#tabs .tabs-nav a[href=' + $(this).data('id')+ ']').click();
    });
});
</script>
</script>
<body>
<div id="tabs">
    <!-- Кнопки -->
    <ul class="tabs-nav">
        <li><a href="#tab-1">Вкладка №1</a></li>
        <li><a href="#tab-2">Вкладка №2</a></li>
    </ul>    
    <!-- Контент -->
    <div class="tabs-items">
        <div class="tabs-item" id="tab-1">
            <strong>Текст вкладки №1</strong>
        </div>
        <div class="tabs-item" id="tab-2">
            <strong>Текст вкладки №2</strong>
        </div>       
    </div>
</div>  
</body>
</html>
  • Вопрос задан
  • 73 просмотра
Решения вопроса 1
vitaly44
@vitaly44
Предприниматель, веб-разработчик, дизайнер
Есть два способа, у которых одна точка входа.

1. Сохранять ID выбранного таб в cookie или web storage.
2. Сохранять ID в хэше адресной строки, в url

При обновлении страницы получать этот ID и делать таб с этим ID активным.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@strelok011
Добавлю к предыдущему ответу - если разруливать на стороне сервера - можно нужной вкладке добавлять класс типа active
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Sveak Барнаул
от 50 000 руб.
от 60 000 до 90 000 руб.
Sellfashion Нижний Новгород
от 100 000 до 150 000 руб.