耐贝西照明官网 LUMBENCY LIGHTING

耐贝西照明官网 Lumbency Lighting

欢迎来到耐贝西照明官网 Lumbency Lighting!在这里，您可以探索我们的产品、了解我们的品牌故事以及获取最新的照明设计灵感。请跟随页面上的导航，发现属于您的照明之美。

网站功能

• 点击标签页切换不同的照明方案
• 使用手机或平板查看适配的照明设计方案
• 支持触摸屏幕操作

网站加载与响应式设计

在页面加载时，所有盒子(.box)会隐藏，仅显示第一个盒子(.box:eq(0))。同时，将第一个选项卡标题(.tab_title li:eq(0))设置为激活状态。当用户点击其他选项卡标题时，会为其添加激活状态并隐藏其他选项卡内容，同时显示对应的盒子内容。

为了适应不同设备和屏幕尺寸，我们使用了媒体查询(media query)来实现响应式设计。通过检测用户代理字符串(navigator.userAgent),我们可以判断当前设备是否为移动设备(如 iPhone 或 Android)。如果是移动设备，将页面内容进行相应调整以适应较小的屏幕空间。

代码示例

以下是一些关键代码片段：

$(document).ready(function(){
$(".box").hide();
$(".box:eq(0)").show();
$('.tab_title li:eq(0)').addClass("active");
$('.tab_title li').click(function(){
$(this).addClass("active").siblings().removeClass("active");
$(".box").eq($('.tab_title li').index(this)).show().siblings().hide();
});
});

var mobileAgent = new Array("iphone", "android");
var browser = navigator.userAgent.toLowerCase();
var isMobile = false;
for (var i=0; i<mobileAgent.length; i++){ if (browser.indexOf(mobileAgent[i]) > -1){ isMobile = true; break; } }