Javascript 带有链接的jquery选项卡记住最后一个活动项

我编写了以下代码，以便能够更改li标记的类，然后更改其CSS。
我创建了一个cookie变量来帮助我选择好的li标记。但我单击时有一个间隙。
我有三个选项卡：设备、链接和站点。
例如，如果我以前单击过设备并单击过站点，则会选择站点。

<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('.tabs .tab-links a').on('click', function(e)  {
    jQuery.cookie("select", jQuery(this).parent('li').attr('id'));    
});  
jQuery('#' + jQuery.cookie("select")).addClass('active').siblings().removeClass('active');
});
</script>
<div class="tabs" >
  <ul class="tab-links">
    <li id="device"><a href="/netmg/controller/device/search">Devices</a></li>
    <li id="link"><a href="/netmg/controller/link/search">Links</a></li>
    <li id="site"><a href="/netmg/controller/site/search">Sites</a></li>
  </ul>
</div>

jQuery（文档）.ready（函数（）{
jQuery（'.tabs.tab链接a'）。on（'click'，函数（e）{
cookie（“select”，jQuery（this.parent（'li'）.attr（'id'））；
});  
jQuery（'#'+jQuery.cookie（“选择”））.addClass（'active'）.Sides（）.removeClass（'active'）；
});

由于单击链接会将您带到新页面，因此无需以编程方式执行此操作。 页面/netmg/controller/device/search应具有

<li id="device" class="active">...</li>
<li id="link">...</li>
<li id="site">...</li>

<li id="device">...</li>
<li id="link" class="active">...</li>
<li id="site">...</li>

<li id="device">...</li>
<li id="link">...</li>
<li id="site" class="active">...</li>

---

有关演示，请参见。

那么您想要的是3种样式，对吗？一个用于当前页面，一个用于未访问的页面，一个用于上一页？@谢谢您的回复。事实上，我有3个选项卡（链接、设备、站点），是的，我希望当前选项卡有一个样式，另外两个选项卡有一个样式。我不想在同一个JSP中编码，我真的希望有3个不同的JSP。唯一的可能性是在每个JSP中集成两个菜单？如果每个页面都有不同的内容，并且您必须确定哪个选项卡以编程方式处于活动状态，您可以解析JavaScript的

location.pathName

返回的字符串以获取页面名称，然后使用该名称标识获取

活动类的选项卡。但它有点黑。让类已经存在于每个页面的代码中可以节省几毫秒的加载时间。
<script>
jQuery(document).ready(function() {
    jQuery('.tab-links li a').click(function(e){
        e.preventDefault();
        var newdiv = jQuery(this).attr('href');
        jQuery('.tab-links li').removeClass('active');
        jQuery(this).parent('li').addClass('active');
        jQuery('.contents div').hide();
        jQuery(newdiv).show()
    });
});
</script>
<div class="tabs" >
  <ul class="tab-links">
    <li id="device" class="active"><a href="#deviceContent">Devices</a></li>
    <li id="link"><a href="#linkContent">Links</a></li>
    <li id="site"><a href="#siteContent">Sites</a></li>
  </ul>
</div>
<div class="contents">
    <div id="deviceContent"><!-- insert some contents -->a</div>
    <div id="linkContent"><!-- insert some contents --> b</div>
    <div id="siteContent"><!-- insert some contents -->c</div>
</div>