2016-12-03 2 views
1

Ich habe eine Drop-Down-Liste auf einer Seite wie folgt aus:Halte Drop-Down-Auswahl auf Seite neu laden in html

<div id="dropdowndosen-lvl1" class="panel-collapse collapse"> 
    <div class="panel-body"> 
     <ul class="nav navbar-nav"> 
      <li class="active" id="btntab5" runat="server"><a href="Add Dosen.aspx"><span class="glyphicon glyphicon-plus"></span> Add Dosen</a></li> 
      <li id="btntab6" runat="server"><a href="Data Dosen.aspx"><span class="glyphicon glyphicon-file"></span> Data Dosen</a></li> 
     </ul> 
    </div> 
</div> 

Picture 1

Wenn ein Benutzer eine Auswahl trifft, wird die aktuelle Seite wie diese Picture 2 aktualisiert, Aber wie behalte ich die Auswahl des Benutzers nach der Seitenaktualisierung in der Liste? Mit anderen Worten, ich möchte nicht, dass die Liste auf den standardmäßig ausgewählten Wert zurückgesetzt wird.

Bitte helfen Sie mir.

+0

zeigen Sie uns, was Sie bis jetzt versucht haben – ScanQR

Antwort

1

dieses Beispiel versucht erstes Auto aus der Liste auswählen, und klicken Sie dann auf Schaltfläche „Wählen“ danach die Seite neu zu laden oder schließen und wieder öffnen, das Auto, das Sie in dem ersten Teil choosed hat einen orang Hintergrund

<!DOCTYPE html> 
<html> 
<head> 
    <script type="text/javascript"> 
    function getname(){ 
    var car = document.getElementById("cars").value; 
    localStorage.cars = car; 
    document.getElementById("result").innerHTML=localStorage.cars; 
    } 

    function colorize(){ 
    document.getElementById(localStorage.cars).style.background = "orange"; 
    } 
    </script> 
</head> 
<body onload="colorize()"> 
    <select name="cars" id="cars"> 
    <option id="volvo" value="volvo">Volvo</option> 
    <option id="saab" value="saab">Saab</option> 
    <option id="fiat" value="fiat">Fiat</option> 
    <option id="audi" value="audi">Audi</option> 
    </select> 
    <button onclick="getname()">choose</button> 
    <hr> 
    <a id="result"></a> 
</body> 
</html> 
0

Sie können dies tun, indem der URL-Weg bekommen und die entsprechende a-Tag ausgewählt werden, die diesen Weg in seiner href hat und Einstellungen der übergeordneten li Klasse active.

Beispielcode ist unten angegeben.

$(function(){ 
     $('ul.nav').find('li').removeClass('active'); // to remove hardcoded active class 
     var activeAnchor = $('ul.nav').find('a[href="' + location.pathname + location.search + '"]'); 
     $(activeAnchor).parent('li').addClass('active'); 

     //below script is if at all you have sub menus too 
     if ($(activeAnchor).closest(".submenu").length > 0) { 
      $(activeAnchor).closest('ul').parent('li').addClass('active').addClass('open').closest('ul').parent('li').addClass('open'); 
      $(activeAnchor).parent('li').addClass('active'); 
      $(activeAnchor).closest('ul').removeAttr('style').removeClass('nav-hide'); 
      }    
    }); 
+0

Können Sie mir mehr Erklärung in HTML geben? Entschuldigung, ich bin immer noch Neuling in HTML – swatzz

Verwandte Themen