jQuery tabs reloading

Как я новичок в jQuery, поэтому делаю простые упражнения. Я сделал простые вкладки.jQuery tabs reloading

Я пытаюсь использовать функцию location.reload().

Вот мой код

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>Tabs</title> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
</head> 
    <body> 

    <div class="container"> 
     <h2>Tabs Testing</h2> 
     <ul class="nav nav-tabs"> 
      <li class="active"><a data-toggle="tab" href="#menu1">Tab1</a></li> 
      <li><a data-toggle="tab" href="#menu2">Tab2</a></li> 
      <li><a data-toggle="tab" href="#menu3">Tab3</a></li> 
      <li><a data-toggle="tab" href="#menu4">Tab4</a></li> 
     </ul> 

      <div class="tab-content"> 
       <div id="menu1" class="tab-pane fade in active"> 
        <h3>Menu 1</h3> 
         <p> This is tab one</p> 
       </div> 
       <div id="menu2" class="tab-pane fade"> 
        <h3>Menu 2</h3> 
         <p>This is tab two</p> 
       </div> 
       <div id="menu3" class="tab-pane fade"> 
        <h3>Menu 3</h3> 
         <p>This is tab three</p> 
         <button type="submit" class="btn btn-primary" onclick="myFunction()">Reload Page</button> 
       </div> 
       <div id="menu4" class="tab-pane fade"> 
        <h3>Menu 4</h3> 
         <p>This is tab four</p> 
       </div> 
      </div> 
     </div> 
     <script> 
      function myFunction() { 
       location.reload(); 
      } 
     </script> 
    </body> 
</html>

Таким образом, в Tab3 я вставил кнопку, с вы можете увидеть, я написал простую функцию JS, вызвав эту функцию будет перезагрузить страницу.

Так вот, где я застрял, когда страница перезагружается, я пытаюсь сохранить выбранную вкладку активной, то есть Tab3. Но после перезагрузки он будет активен Tab1.

Так что я проверил другие вопросы и ответы, но мне было сложно понять.

Любая помощь, которая будет полезна. Заранее спасибо.

источник

2015-10-29 abhillier

Возможный дубликат [Помните, какая вкладка была активна после обновления] (http://stackoverflow.com/questions/4299435/remember-which-tab-was-active- после-обновления) –

Что происходит, когда вы переходите к 'path/to/file.html # menu3'? – gldraphael

мой url не меняется .. – abhillier

Причина, по которой он не работает, заключается в том, что браузер не знает, что он должен показать вам эту конкретную вкладку после ее перезагрузки. Один из способов показать конкретный раздел сайта - использовать хэш местоположения.

$(function() { 
    // get the current hash 
    var hash = document.location.hash; 

    // open the appropriate tab if a hash exists 
    if (hash) { 
     $('.nav-tabs a[href='+hash+']').tab('show'); 
    } 

    // Update the hash each time the tab is shown 
    $('a[data-toggle="tab"]').on('show.bs.tab', function (e) { 
     window.location.hash = e.target.hash; 
    }); 
});

Если вы предпочитаете, чтобы держать вещи простыми, это решение использует this плагин.

Скачать этот файл и добавить его в скриптах: https://raw.githubusercontent.com/aidanlister/jquery-stickytabs/master/jquery.stickytabs.js

GitHub не любит хотлинкинга, так что не хотлинк.

Добавьте это ниже myFunction():

$(function() { 
    $('.nav-tabs').stickyTabs(); 
});

источник

2015-10-29 19:25:57 gldraphael

оба решения не рабочий – abhillier

@abhishek хорошо, тогда вы явно делаете что-то не так. Скачайте файл здесь и дайте мне знать, если он работает: http://pastebin.com/CiNknL1r – gldraphael

Я думаю, что мне не хватало скобок ... но теперь его работаю спасибо .. – abhillier

Дайте другую Id для всех четырех tags.Then написать ту же функцию OnClick там с идентификаторами: onClick ="myFunction(id)" И ваш JQuery является:

function myFunction (id) { 
$("id").addClass('active'); 

}

источник

2015-10-29 18:56:11

не работает – abhillier

Update: добавить id="loadIt" атрибут к кнопке, как это:

<button id="loadIt" type="submit" class="btn btn-primary">Reload Page</button>

Тогда попробуйте этот фрагмент:

<script> 
    var url, id; 
    $('#loadIt').on('click', function(event) { 
     event.preventDefault(); 
     url = window.location.href; 
     id = ((/#menu/).test(url)) ? "" : '#' + $(this).closest('div').attr('id'); 
     // console.log(url + id); 
     window.location.replace(url + id); 
    }); 
</script>

JSFiddle Надеюсь, это сработает.

источник

2015-10-29 18:57:28

К сожалению, он не работает – abhillier

@abhishek, я обновил код выше, он работает для меня * насколько я проверял его * Надеюсь, что это сработает и для вас тоже –

jQuery tabs reloading

ответ

Смежные вопросы