gpt4 book ai didi

javascript - JQuery - 使用 cookie 和窗口宽度在选项卡溢出上进行响应式导航

转载 作者:行者123 更新时间:2023-11-28 09:35:48 25 4
gpt4 key购买 nike

这是一个有趣的问题。

我有一个看起来像这样的导航栏:

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

所以#main_nav 的固定宽度为 980px,隐藏了溢出,标签是内联 block 。当屏幕宽度减小时,选项卡溢出并超出屏幕 View ,thou 被隐藏。

为了让它变得有趣,我创建了一个属性来捕获最后一个选项卡并查看它是否溢出,如果溢出,则触发事件,以便选项卡将 from block 更改为响应式设计等其他内容。

代码如下:

$( 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 NUMBER?").width();

  1. 为了避免闪烁,我尝试了定时器,但都没有用。你们中有人知道如何在触发 Tab 事件(标签溢出)时保存屏幕宽度的 Cookie 吗?因此,只有在达到屏幕宽度以将选项卡返回到其原始形状后,我才能触发 else 事件。

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

最佳答案

您可以使用 window.localStorage 方法在 JavaScript 中保存 cookie。看看https://developer.mozilla.org/en/docs/Web/Guide/API/DOM/Storage获取更多信息。

关于javascript - JQuery - 使用 cookie 和窗口宽度在选项卡溢出上进行响应式导航,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25530985/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com