Форум программистов, компьютерный форум, киберфорум
Наши страницы
jQuery
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.88/8: Рейтинг темы: голосов - 8, средняя оценка - 4.88
kionlife1
0 / 0 / 1
Регистрация: 28.03.2018
Сообщений: 8
1

Реализация табов через jQuery

09.01.2019, 11:16. Просмотров 1521. Ответов 3

Подскажите, пожалуйста, почему при выполнении этого скрипта на странице:

Javascript
1
2
3
4
5
<script type="text/javascript">
$(".tabs .tab").click(function(){
    sessionStorage.setItem('tab_key', $('.tabs .tab').index(this)); // записываем индекс таба в хранилище при клике на них
});
</script>
В хранилище передается tab_key только cо значением 0 или 1? При чем 0 при первом class="tab", а 1 во всех остальных.

Весь код страницы:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<html>
<head>
<script src="jquery.js" type="text/javascript"></script> 
<link rel="stylesheet" src="tabs_css.css" type="text/css" />
</head>
<body>
<div class="content">
    <div class="choose">
        <div class="tabs">
            <span class="tab"><h2>Пусто</h2></span>
            <span class="tab"><h2>Консоль<h2></span> 
            <span class="tab"><h2>Довідка<h2></span> 
            <span class="tab"><h2>Довідка2<h2></span> 
            <span class="tab"><h2>Довідка3<h2></span>           
        </div>
    
        <div class="tab_content">
            <div class="tab_item">
            <a>пусто</a>
            </div>
            <div class="tab_item">
                <form method="post">
                <input id="typeForm" name = "typeForm" type="hidden" value="add">
                <table>
                    <tr>
                        <td>Команда:</td>
                        <td width="80%"><input type="text" id="command" name="command" style="width:95%;"></td>
                        <td><input type="submit" name="submit" value="Передати"></td>
                    </tr>
                </table>
                </form> 
            </div>
            <div class="tab_item">
            <a>пусто</a>
            </div>
            <div class="tab_item">
            <a>пусто2</a>
            </div>
            <div class="tab_item">
            <a>пусывафываыфвато3</a>
            </div>
        </div>
    </div>
</div>
</body>
</html>

Код на этой же странице для вывода содержимого tab_item
Javascript
1
2
3
4
5
6
7
8
9
10
<script type="text/javascript"> 
var tab_key = sessionStorage.getItem("tab_key"); // получаем индекс таба из сессионного хранилища.
if(tab_key === null){tab_key = 0;} // если индекса нету то он 0, начальный
 
$(".choose .tab_item").hide().eq(tab_key).fadeIn() ;
$(".choose .tab").click(function() {
    $(".choose .tab").removeClass("active").eq($(this).index()).addClass("active");
    $(".tab_item").hide().eq($(this).index()).fadeIn()
}).eq(tab_key).addClass("active");
</script>
Собственно код который в вопросе:
Javascript
1
2
3
4
5
<script type="text/javascript">
$(".tabs .tab").click(function(){
    sessionStorage.setItem('tab_key', $('.tabs .tab').index(this)); // записываем индекс таба в хранилище при клике на них
});
</script>
0
Лучшие ответы (1)
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
09.01.2019, 11:16
Ответы с готовыми решениями:

Реализация отправки БД через jQuery
Имеется файл PHP требуется релизовать его с помощью ajax: &lt;body&gt; &lt;div class=&quot;class1&quot;&gt; ...

Реализация валидации формы на Jquery
Подскажите, как сделать валидацию форм на jquery? Я начал, а дальше не могу сообразить? Например...

Многоязычность через jquery
Есть задача сделать средствами javascript многоязычность. Именно javascript, а не php. Для этого...

Php через jquery
Как реализовать передачу формы и занесеня данных в БД через jquery ,без перезагрузки страницы? У...

Закрытие Div'a через JS+jQuery
Здравствуйте! Вопрос очень легкий для знающих людей. Я, пока что, только учусь. Имеется Div,...

3
fanatikus
1159 / 1128 / 534
Регистрация: 17.11.2012
Сообщений: 5,016
09.01.2019, 13:10 2
а нафига для табов хранилище?
PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<script>
    $(function () {
        $('.tab').click(function(){
            var idTabItem = $(this).data('tab');
            
            $('.tab').removeClass('active');
            $('.tab_item').removeClass('active');
            
            $(this).addClass('active');
            $('#' + idTabItem).addClass('active');
        })
    })
</script>
 
 
<style>
        .tab_content > .tab_item{
                display:none;
        }
        .tab_content > .active{
                display:block;
        }
 
        .tabs > .active{
                color:red;
        }
</style>
 
 
<div class="content">
    <div class="choose">
        <div class="tabs">
            <span data-tab="t_1" class="tab active"><h2>Пусто</h2></span>
            <span data-tab="t_2" class="tab"><h2>Консоль</h2></span> 
            <span data-tab="t_3" class="tab"><h2>Довідка</h2></span> 
            <span data-tab="t_4" class="tab"><h2>Довідка2</h2></span> 
            <span data-tab="t_5" class="tab"><h2>Довідка3</h2></span>           
        </div>
    
        <div class="tab_content">
            <div class="tab_item active" id="t_1">
            <a>пусто</a>
            </div>
            <div class="tab_item" id="t_2">
                <form method="post">
                <input id="typeForm" name = "typeForm" type="hidden" value="add">
                <table>
                    <tr>
                        <td>Команда:</td>
                        <td width="80%"><input type="text" id="command" name="command" style="width:95%;"></td>
                        <td><input type="submit" name="submit" value="Передати"></td>
                    </tr>
                </table>
                </form> 
            </div>
            <div class="tab_item" id="t_3">
            <a>пусто</a>
            </div>
            <div class="tab_item" id="t_4">
            <a>пусто2</a>
            </div>
            <div class="tab_item" id="t_5">
            <a>пусывафываыфвато3</a>
            </div>
        </div>
    </div>
</div>
1
kionlife1
0 / 0 / 1
Регистрация: 28.03.2018
Сообщений: 8
09.01.2019, 14:00  [ТС] 3
Нужно. Для того чтобы при перезагрузке страницы активной была та вкладка которая была выбрана последней. Да и вопрос не о том как сделать табы лучше.
0
fanatikus
1159 / 1128 / 534
Регистрация: 17.11.2012
Сообщений: 5,016
09.01.2019, 14:27 4
Лучший ответ Сообщение было отмечено kionlife1 как решение

Решение

Цитата Сообщение от kionlife1 Посмотреть сообщение
Нужно.
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
$(function () {
    toogleTabs(sessionStorage.getItem('tab_key'));
    
    $('.tab').click(function () {
        var idTabItem = $(this).data('tab');
        
        toogleTabs(idTabItem);
    })
});
function toogleTabs(idTab){
    if(idTab != null){
        $('.tab').removeClass('active');
        $('.tab_item').removeClass('active');
 
        $('span[data-tab ="' + idTab + '"]').addClass('active');
        $('#' + idTab).addClass('active');
        
        sessionStorage.setItem('tab_key', idTab);
    }
}
1
09.01.2019, 14:27
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
09.01.2019, 14:27

Имитация select через jQuery
Добрый день. Подскажите, как можно через jQuery имитировать поведение select для выпадающего...

Работа с SVG через jQuery
Здравствуйте! few month ago меня отправили из раздела HTML учить HTML&amp;CSS и z даже начал...

Отрытие списка li через jQuery
Доброго всем вечера. Вот задался вопросом можно ли дать команду на открытия списка ul li. Если кто...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
4
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2019, vBulletin Solutions, Inc.
Рейтинг@Mail.ru