cuốn sách gpt4 ai đã làm

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

In lại Tác giả: Walker 123 更新时间:2023-11-28 09:35:48 25 4
mua khóa gpt4 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 更改为响应式设计等其他内容。

Mã này như sau:

$( 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' } );
}
khác {
$ ( 'ul > li' ) .css ( { 'float': '' } );
}
}

问题:标签开始闪烁,因为它检查#tab14 是否溢出,刷新时您需要调整窗口大小以达到该状态。

问题:1. 与问题无关,但是,什么是一个好的 Jquery 计数器自动查找最后一个选项卡的编号并填充到 $("#tab NUMBER?").width();

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

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

câu trả lời hay nhất

Bạn có thể sử dụng 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
Chứng chỉ ICP Bắc Kinh số 000000
Hợp tác quảng cáo: 1813099741@qq.com 6ren.com
Xem sitemap của VNExpress