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

Question

I did the following code, to be able to change the class of an li tag and then change the CSS of it.
I created a cookie variable that help me to select the good li tag. but I have a gap when I click.
I have three tabs : device, links and sites.
for example if I click on devices and had click on sites before, sites will be selected.

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

Answer 1

Since clicking the link takes you to a new page, there is no need to do this programmatically. The page /netmg/controller/device/search should have

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

The page /netmg/controller/link/search should have

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

The page /netmg/controller/site/search should have

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

You can put that in the HTML.

If, instead, you want to make it all one page and the href attribute indicates what content is displayed, say, in a <div id="deviceContent"></div> or similar, you could use this:

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

For a demo, see this fiddle .