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

jquery tabs with links remember last active item

本文关键字：最后一个 活动 链接 jquery 选项      更新时间：2023-11-01

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

由于单击链接会进入一个新页面，因此无需以编程方式执行此操作。页面/网络/控制器/设备/搜索应具有

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

页面/网络/控制器/站点/搜索应具有

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

如需演示，请参阅此小提琴。

相关文章：