Php Javascript: Keep Radio-Tasten auf der Seite aktualisiert

Ich habe reaktionsschnellen CSS-Tabs, die ich verwenden, um Informationen in einer eleganten Art und Weise anzuzeigen, aber wenn Benutzer aktualisieren Seite geht es zurück zum ersten überprüften Eingang. Ich würde gerne wissen, wie man die Benutzer-Taste auf der Seite aktiviert, die er ausgewählt hat, die er zuvor ausgewählt hat. Ich habe ein Skript geschrieben, aber es scheint nicht zu funktionieren.Php Javascript: Keep Radio-Tasten auf der Seite aktualisiert

Tabs

<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>

Skript

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

Quelle

2017-02-20 Sebastian Farham

Sie haben Informationen über die Aktualisierung der Seite gelangen oder Verwendung eine andere Art von Speicher Wenn die Seite neu lädt, werden Änderungen via Javascript verloren gehen. – NewToJS

@NewToJS: Stört es Sie am Beispiel zu lehren? ': -D' –

Wird die folgende Arbeit für Sie Anforderung:

<!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>

Quelle

2017-02-20 03:06:36 uautkarsh

Richtige Antwort. Bitte wählen Sie dies als Lösung, damit es zukünftigen Benutzern hilft. FYI, um die Daten im lokalen Speicher zu sehen, In Chrome -> drücken Sie F12 -> klicken Sie auf Anwendung -> Wählen Sie lokalen Speicher auf der Seite nav. Sie finden den Schlüssel und den Wert als "ausgewählt" und "tab2", was hilft, den vom Benutzer eingegebenen Wert zu speichern. – Venky

Php Javascript: Keep Radio-Tasten auf der Seite aktualisiert

Antwort

Verwandte Themen