Question

我在这样的页面上有一个下拉列表：

<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

当用户进行选择时，当前页面会像Picture 2一样刷新，但如何在页面刷新后保持用户的选择在列表中可见？换句话说，我不希望列表回滚到其默认选定值。

请帮助我。

Answer 1

试试这个例子首先从列表中选择汽车，然后单击＆＃34;选择＆＃34;按键之后重新加载页面或关闭它并再次打开它，你在第一部分选择的汽车有一个红毛猩猩背景

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

Answer 2

您可以通过获取网址路径并选择在a中具有该路径的相应href标记并将其父li类设置为active来执行此操作。

示例代码如下。

   $(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');
          }             
   });

在html页面重新加载时保留下拉列表选择

2 个答案: