jquery中由列表项值选择的预填充列表项

Question

我是 JQuery 的新手。在我的应用程序中，我有以下内容：

我的 HTML 代码在这里..

<ul id="list">
    <li>
        <a class="selected" value="0" href="#"  id="sel">ALL</a>
    </li>
    <li>
        <a href="#"  value="1">1+</a>
    </li>
    <li>
        <a href="#" value="2">2+</a>
    </li>
    <li>
        <a href="#" value="3">3+</a>
    </li>
    <li>
        <a href="#" value="4">4+</a>
    </li>
    <li>
        <a href="#" value="5">5+</a>
    </li>
</ul>

<input type="hidden" id="hdn_list" value=""></input>

我的 CSS 代码在这里..

.selected{background-color:green;}

获取所选列表值的我的 JQuery 代码在这里..

$(document).ready(function () {
    $('#list li a').click(function () {
        var new = $(this).attr("value");
        $("#hdn_list").value = new;          //passing the new selected values to hidden control
        $('#list li a').removeClass('selected');
        $(this).addClass('selected');
        return false;
    });
});

当我单击提交按钮时，它会被重定向到下一页。如果我再次返回此页面，它必须使用该隐藏控件（#hdn_list）值预先填充选定的值，并且 css 样式也必须应用选定的价值..如何通过 jquery/javascript 做到这一点？提前致谢。

Answer 1

试试这个

 $(document).ready(function () {
    $('#list li a').click(function (e) {
        var nvalue = $(this).attr("value");
        localStorage.setItem("menu", nvalue);
        $("#hdn_list").val(nvalue); //passing the new selected values to hidden control
        $('#list li a').removeClass('selected');
        $(this).addClass('selected');
        e.preventDefault();
    });
      var retrievedObject = localStorage.getItem('menu');
      if (retrievedObject != null) {
        $('ul li a').removeClass("selected")
        $('ul li a[value="' + retrievedObject +'"]').addClass('selected');
      } else {
        $('ul li a:eq(0)').addClass('selected');
      }
});

DEMO

Answer 2

在 jquery 中使用 event.preventDefault()。它停止了默认操作

$(document).ready(function () {
    $('#list li a').click(function (event) {
      event.preventDefault();
        var new = $(this).attr("value");
        $("#hdn_list").value = new;          //passing the new selected values to hidden control
        $('#list li a').removeClass('selected');
        $(this).addClass('selected');

    });
});