Question

我做了以下代码，以便能够更改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>

Answer 1

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

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

页面/ netmg / controller / link / search应该

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

页面/ netmg / controller / site / search应该有

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

您可以将其放在HTML中。

相反，如果您想要将其全部设为一个页面而href属性指示显示的内容，例如，在<div id="deviceContent"></div>或类似内容中，您可以使用以下内容：

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

有关演示，请参阅this fiddle。

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

1 个答案: