Question

大家好，我有这个代码......

<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com /ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(function(){
    $(".mytableCol3").click(function(){
        $(this).addClass("on").parent().siblings("tr").find("td").removeClass("on");
    });
});
</script>
<style>
    .on { background-color:red; color:#ffffff; }
</style>
</head>
<body>

<table class="mytable" border=1>
  <tbody>
    <tr>
      <td class="mytableCol3"><a href="google.com">google</a></td>
    </tr>
    <tr>
      <td class="mytableCol3"><a href="yahoo.com">yahoo</a></td>
    </tr>
    <tr>
      <td class="mytableCol3"><a href="bing.com">bing</a></td>
    </tr>
  </tbody>
</table>
<table class="mytable" border=1>
</body>
</html>

上面的代码通过在单元格之间切换红色来正常工作，并且当点击它时它也会将页面重定向到“特定位置”。请检查demo，你可以先观察到单元格变为红色然后它会被重定向到google / yahoo / bing，但现在我们需要做什么，当他们通过点击后退按钮/（我编写的代码）回来时，所选的特定单元格仍然应该用红色突出显示....我reied通过会话做到这一点，但不完全是..任何一个plzz帮助我解决这个....

Answer 1

您可以使用$.cookie

执行此操作

为每一行分配一个ID并设置cookie，然后检查该cookie是否有可用的id：

<table class="mytable" border=1>
    <tbody>
        <tr>
            <td class="mytableCol3" id="google"><a href="http://google.com">google</a></td>
        </tr>
        <tr>
            <td class="mytableCol3" id="yahoo"><a href="http://yahoo.com">yahoo</a></td>
        </tr>
        <tr>
            <td class="mytableCol3" id="bing"><a href="http://bing.com">bing</a></td>
        </tr>
    </tbody>
</table>

和javascript：

$(function(){
    $(".mytableCol3").click(function(){
        $(this).addClass("on").parent().siblings("tr").find("td").removeClass("on");
        $.cookie('clicked', $(this).attr('id'));
    });

    if($('#'+$.cookie('clicked'))){
        $('#'+$.cookie('clicked')).addClass('on');
    }
});

您可以使用普通的javascript for cookie，我使用plugin作为example。

后退按钮后切换

1 个答案: