Выбор определенного элемента раздела после перезагрузки страницы

Question

В настоящее время я работаю над проектом html5 и jquery. У меня есть вкладка html5 tab на странице, которая постоянно обновляется каждые 5 секунд. Он обновляется, отправляя на php-скрипт, который извлекает информацию из базы данных, а затем некоторый javascript добавляет распечатку из скрипта php в div. Перед обновлением он обновляет другой div с загрузочным изображением ajax, и как только обновление будет завершено, он очистит div с помощью  . Из-за обновления, хотя он всегда по умолчанию используется для первой вкладки, очевидно, но мне нужно сохранить его на выбранной вкладке после обновления.

Ниже приведен код выбора вкладок.

function getEmailData() 
{ 
    echo ' 
     <article class="tabs"> 
      <section id="tab1"> 
       <h2><a href="#tab1">Queued</a></h2> 
        <center><strong>Queued Emails</strong></center> 
       ' . getEmails("Queued") . ' 
      </section> 
      <section id="tab2"> 
       <h2><a href="#tab2">Trying</a></h2> 
       <center><strong>Trying</strong></center> 
       ' . getEmails("Trying") . ' 
      </section> 
      <section id="tab3"> 
       <h2><a href="#tab3">Sent</a></h2> 
       <center><strong>Sent Emails</strong></center> 
       ' . getEmails("Sent") . ' 
      </section> 
      <section id="tab4"> 
       <h2><a href="#tab4">Failed</a></h2> 
       <center><strong>Failed Emails</strong></center> 
       ' . getEmails("Failed") . ' 
      </section> 
     </article> 
    '; 
} 

getEmails(); функция возвращает данные, которые должны отображаться на каждой вкладке.

Ниже CSS

article.tabs 
{ 
    position: relative; 
    display: block; 
    width: 40em; 
    height: 15em; 
    margin: 2em auto; 
} 

article.tabs section 
{ 
    position: absolute; 
    display: block; 
    /*top: 1.8em;*/ 
    top: -10px; 
    left: 0; 
    height: 12em; 
    padding: 10px 20px; 
    background-color: #ddd; 
    border-radius: 5px; 
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.1); 
    z-index: 0; 
    width: 800px; 
    height: 300px; 
} 

article.tabs section:first-child 
{ 
    z-index: 1; 
     color: #333; 
    background-color: #fff; 
    z-index: 2; 
} 

article.tabs section h2 
{ 
    position: absolute; 
    font-size: 1em; 
    font-weight: normal; 
    width: 120px; 
    height: 1.8em; 
    top: -1.8em; 
    left: 10px; 
    padding: 0; 
    margin: 0; 
    color: #999; 
    background-color: #ddd; 
    border-radius: 5px 5px 0 0; 
} 


article.tabs section:nth-child(2) h2 
{ 
    left: 132px; 
} 

article.tabs section:nth-child(3) h2 
{ 
    left: 254px; 
} 

article.tabs section:nth-child(4) h2 
{ 
    left: 376px; 
} 


article.tabs section h2 a 
{ 
    display: block; 
    width: 100%; 
    line-height: 1.8em; 
    text-align: center; 
    text-decoration: none; 
    color: inherit; 
    outline: 0 none; 
} 

article.tabs section:target, article.tabs section:target h2 
{ 
    color: #333; 
    background-color: #fff; 
    z-index: 2; 
} 

article.tabs section, article.tabs section h2 
{ 
    -webkit-transition: all 500ms ease; 
    -moz-transition: all 500ms ease; 
    -ms-transition: all 500ms ease; 
    -o-transition: all 500ms ease; 
    transition: all 500ms ease; 
} 

В принципе, мой вопрос, если я выбираю вкладку 3-я, а Аякс пост делает перезагрузку, как я могу убедиться, что закладка третьей по-прежнему выбрана и Безразлично» t по умолчанию вернуться к первому.

Спасибо за любую помощь, которую вы можете предоставить.

Answer 1

Насколько я понимаю, у вас есть 3 варианта:

1. освежают каждую вкладку по отдельности и только освежают содержимое вкладки, а не вся статья
2. Сохранить ранее выбранный вкладку в JavaScript переменную перед вызовом Ajax, а затем повторно выбрать вкладку после получения и ввода данных
3. Отправляйте предварительно выбранную вкладку через вызов ajax и вставьте класс «selected» на вкладке кода задней части.

2 и 3 являются фактически теми же самыми - просто изменяя, где хранятся данные.

Моим предпочтением было бы число 1, так как он не требует, чтобы jQuery обновлял объект табуляции, а также уменьшал количество данных, отправленных назад. Если вы должны обновить весь article, хотя, 2 или 3 (2, вероятно, проще реализовать!)

Answer 2

Вы должны создать файл cookie с помощью настроек PHP или javascript, выбранных в данный момент. попробовать что-то вроде:

</script src="https://raw.github.com/carhartl/jquery-cookie/master/jquery.cookie.js"></script> 

$('.tabs section h2 a').click(function(){ 
    var tabIndex = $(this).parents('section').first().addClass('selected').index(); 
    $.cookies.set('tabIndex', tabIndex); 
}) 

затем при загрузке документа

var tabIndex = $.cookies.get('tabIndex') 
if(tabIndex) { 
    $('.tabs section:nth-child(' +tabIndex+ ')').addClass('selected') 
} 

отказ от ответственности: не тестировалось.