jquery 个带有链接的选项卡会记住最后一个活动项目
jquery tabs with links remember last active item
我做了以下代码,能够更改 li 标签的 class,然后更改它的 CSS。
我创建了一个 cookie 变量来帮助我 select good li 标签。但是我点击的时候有间隙
我有三个选项卡:设备、链接和站点。
例如,如果我点击设备并之前点击过网站,网站将被 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>
由于单击 link 会将您带到一个新页面,因此无需以编程方式执行此操作。
页面 /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。
我做了以下代码,能够更改 li 标签的 class,然后更改它的 CSS。
我创建了一个 cookie 变量来帮助我 select good li 标签。但是我点击的时候有间隙
我有三个选项卡:设备、链接和站点。
例如,如果我点击设备并之前点击过网站,网站将被 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>
由于单击 link 会将您带到一个新页面,因此无需以编程方式执行此操作。 页面 /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。