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

在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');

    });
});

Answer 2

试试这个

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

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

2 个答案: