Javascript JQuery-使用Cookie和窗口宽度对选项卡溢出进行响应导航

这里有一个有趣的问题

我有一个如下所示的导航栏：

< div id = "main_nav" >
< ul >
< li id = "Tab1" > Home < / li >
< li id = "Tab2" > Home1 < / li >
< li id = "Tab3" > Home2 < / li >
< li id = "etc" > etc etc < / li >
...
< / ul >
< / div >

因此，主导航的固定宽度为980px，溢出隐藏，制表符为内联块。 当屏幕宽度减小时，选项卡溢出，超出屏幕视图，千个被隐藏

为了让它有趣，我创建了一个属性来捕获最后一个选项卡，并查看它是否溢出，如果溢出，则触发事件，以便选项卡将从块更改为其他类似响应设计的内容

代码如下：

$( window ).on( 'resize', function(){ resize(); } );

function resize() {
var pageWidth = $ ( "#main_nav" ).width();
var elementWidth = $ ( "#tab14" ).width();
var elementLeft = $ ( "#tab14" ).position().left;

if ( pageWidth - ( elementWidth + elementLeft ) < 0 ) { 
$ ( 'ul > li' ) .css ( { 'float': 'left' } ); 
}
else {
$ ( 'ul > li' ) .css ( { 'float': '' } );
}
}

问题是：选项卡开始闪烁，因为它检查tab14是否溢出，刷新时需要调整窗口大小以达到该状态

问题是： 1.与问题无关，但是，什么是一个好的Jquery计数器，可以自动查找最后一个选项卡的编号并填入$tab编号？.width

为了避免闪烁，我试了一下计时器，但都没用。你们中有人知道在触发Tab事件Tab Overflow时如何保存屏幕宽度的Cookie吗？所以我只能在达到屏幕宽度后触发else事件，以使选项卡返回其原始形状。

---

非常感谢您的意见！谢谢。

您可以使用window.localStorage方法在JavaScript中保存cookie。有关更多信息，请查看。

谢谢大家，以下是我自己的解决方案：

溢出时的响应导航：

希望它能帮助任何人寻找这样的功能

---

谢谢。

您好，谢谢，我确实知道如何保存cookie，但问题是如何知道事件触发时的屏幕大小，以及如何实际知道屏幕宽度信息并将其与Tab Overflow事件连接。。。

$(window).on('resize', function(){
        ress_nav();
});

function more_nav() {
    $('#main_nav li').css({'width': ''});
    $('#main_nav li').css({'float': ''});
}

function less_nav() {
    $('#main_nav li').css({'width': '50%'});
    $('#main_nav li').css({'float': 'left'});
}

function ress_nav() {
    var lastTab = $("#main_nav li:last-child");
    var winWidth = $(window).width();
    var elWidth = $(lastTab).width();
    var elLeft = $(lastTab).position().left; 

    if (winWidth - (elWidth + elLeft) < 0) {
        $.cookie('winWidth', winWidth);
        less_nav();
    }
    else if ($(window).width() > $.cookie('winWidth')){
        $.removeCookie('winWidth', winWidth);
        more_nav();
    }
}

if ($(window).width() > $.cookie('winWidth')) {more_nav()} else {less_nav()}