jQuery標籤重新加載

由於我是jQuery的新手，所以我正在做簡單的練習。我已經完成了簡單的選項卡。jQuery標籤重新加載

我正在嘗試使用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

我的網址沒有變化.. – 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函數有ID的：onClick ="myFunction(id)"和你jQuery是：

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

}

來源

2015-10-29 18:56:11

它不工作 – abhillier

更新：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標籤重新加載

回答

相關問題