Скрипт срабатывает только в первой вкладке
Создала табы по типу примера ниже. Проблема в том что скрипт срабатывает только в первой вкладке
<ul class="nav nav-tabs"> <li class="nav-item"> <a class="nav-link active" id="home-tab" data-toggle="tab" href="#tab-1">Home</a> </li> <li class="nav-item"> <a class="nav-link" id="profile-tab" data-toggle="tab" href="#tab-2">Profile</a> </li> <li class="nav-item"> <a class="nav-link" id="contact-tab" data-toggle="tab" href="#tab-3">Contact</a> </li> </ul> <div class="tab-content"> <div class="tab-pane fade show active" id="tab-1"> <h3>Вкладка #1</h3> <a class="btn btn-warning" onclick="window.location.reload();" href="">Обновить пример</a> </div> <div class="tab-pane fade" id="tab-2"> <h3>Вкладка #2</h3> <a class="btn btn-warning" onclick="window.location.reload();" href="">Обновить пример</a> </div> <div class="tab-pane fade" id="tab-3"> <h3>Вкладка #3</h3> <a class="btn btn-warning" onclick="window.location.reload();" href="">Обновить пример</a> </div> </div> <link rel="stylesheet" href="https://snipp.ru/cdn/bootstrap/4.3/bootstrap.min.css"> <style type="text/css"> h3 { padding: 20px 0; } </style> <script src="https://snipp.ru/cdn/jquery/2.1.1/jquery.min.js"></script> <script src="https://snipp.ru/cdn/bootstrap/4.3/bootstrap.min.js"></script> <script> $(function($){ var storage = localStorage.getItem('nav-tabs'); if (storage && storage !== "#") { $('.nav-tabs a[href="' + storage + '"]').tab('show'); } $('ul.nav li').on('click', function() { var id = $(this).find('a').attr('href'); localStorage.setItem('nav-tabs', id); }); }); </script> |
Julia1991,
что не так? <!DOCTYPE html> <html> <head> <title>Untitled</title> <meta charset="utf-8"> </head> <body> <ul class="nav nav-tabs"> <li class="nav-item"> <a class="nav-link active" id="home-tab" data-toggle="tab" href="#tab-1">Home</a> </li> <li class="nav-item"> <a class="nav-link" id="profile-tab" data-toggle="tab" href="#tab-2">Profile</a> </li> <li class="nav-item"> <a class="nav-link" id="contact-tab" data-toggle="tab" href="#tab-3">Contact</a> </li> </ul> <div class="tab-content"> <div class="tab-pane fade show active" id="tab-1"> <h3>Вкладка #1</h3> <a class="btn btn-warning" onclick="window.location.reload();" href="">Обновить пример</a> </div> <div class="tab-pane fade" id="tab-2"> <h3>Вкладка #2</h3> <a class="btn btn-warning" onclick="window.location.reload();" href="">Обновить пример</a> </div> <div class="tab-pane fade" id="tab-3"> <h3>Вкладка #3</h3> <a class="btn btn-warning" onclick="window.location.reload();" href="">Обновить пример</a> </div> </div> <link rel="stylesheet" href="https://snipp.ru/cdn/bootstrap/4.3/bootstrap.min.css"> <style type="text/css"> h3 { padding: 20px 0; } </style> <script src="https://snipp.ru/cdn/jquery/2.1.1/jquery.min.js"></script> <script src="https://snipp.ru/cdn/bootstrap/4.3/bootstrap.min.js"></script> <script> $(function($){ var storage = localStorage.getItem('nav-tabs'); if (storage && storage !== "#") { $('.nav-tabs a[href="' + storage + '"]').tab('show'); } $('ul.nav li').on('click', function() { var id = $(this).find('a').attr('href'); localStorage.setItem('nav-tabs', id); }); }); </script> </body> </html> |
Вот пример https://osmd.vorobievy-gory.kharkov.ua/test/
После голосования появляется шкала, так вот заполнение шкалы пришлось сделать так jQuery('.dem-fill').each(function(){ jQuery(this).width(jQuery(this).data('width')); });, без этого работало на ajax и только в первой вкладке |
Julia1991,
не осилил. |
Часовой пояс GMT +3, время: 10:36. |