2017-02-20 159 views
3

我有響應的css選項卡我用來以優雅的方式顯示信息,但是當用戶刷新頁面時,它會返回到第一個選中的輸入。我想知道如何保持頁面上選擇的用戶按鈕刷新他以前選擇的用戶按鈕。我寫了一個腳本,但它似乎沒有工作。PHP的Javascript:保持在頁面刷新頁面上選擇單選按鈕

標籤

<input class="inputabs" id="tab1" type="radio" name="tabs" checked="checked"> 
    <label class="labeltabs" for="tab1">Inbox</label> 

    <input class="inputabs" id="tab2" type="radio" name="tabs" > 
    <label class="labeltabs"for="tab2">Important</label> 

    <input class="inputabs" id="tab3" type="radio" name="tabs"> 
    <label class="labeltabs" for="tab3">Bin</label> 

腳本

<script> 
$(document).ready(function(){ 
    $('.inputabs input[type="radio"]').each(function(){ 
     $(this).attr("checked",$(this).checked()); 
    } 
); 
</script> 
+3

你將不得不在頁面刷新或使用傳遞信息某種類型的存儲明智的時候,頁面通過JavaScript重新加載任何更改將丟失。 – NewToJS

+0

@NewToJS:你介意以身作則嗎? ':-D' –

回答

7

會爲你的要求了以下工作:

<!DOCTYPE html> 
<html> 
<head> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
    <script> 
    $(document).ready(function(){ 
     if(localStorage.selected) { 
     $('#' + localStorage.selected).attr('checked', true); 
     } 
     $('.inputabs').click(function(){ 
     localStorage.setItem("selected", this.id); 
     }); 
    }); 

</script> 
</head> 
<body> 
    <input class="inputabs" id="tab1" type="radio" name="tabs" checked="checked"> 
    <label class="labeltabs" for="tab1">Inbox</label> 

    <input class="inputabs" id="tab2" type="radio" name="tabs" > 
    <label class="labeltabs"for="tab2">Important</label> 

    <input class="inputabs" id="tab3" type="radio" name="tabs"> 
    <label class="labeltabs" for="tab3">Bin</label> 
</body> 
</html> 
+1

正確答案。請選擇此解決方案,以便它可以幫助未來的用戶。僅供參考,查看存儲在本地存儲中的數據,在chrome中 - >按F12 - >單擊應用程序 - >在導航欄中選擇本地存儲。你會發現鍵和值爲「selected」和「tab2」,這有助於存儲用戶輸入的值。 – Venky

相關問題