layui 切换导航栏 修改layui-this设定

您可以通过修改 `.layui-nav-item.layui-this` 的 CSS 样式来更改当前选中导航栏的样式。

例如，您可以将 `.layui-nav-item.layui-this` 的背景颜色更改为红色：

.layui-nav-item.layui-this {
  background-color: #FF0000;
}

或者，您可以将 `.layui-nav-item.layui-this` 的字体颜色更改为白色：

.layui-nav-item.layui-this {
  color: #FFFFFF;
}

然后，将修改后的 CSS 样式添加到您的样式表中即可。

相关问题

layui 切换导航栏

在 layui 中，可以使用下面的代码来实现导航栏的切换：

// 定义一个 Tab 实例
var tab = layui.tab;

// 监听导航栏的点击事件
tab.on('tab(nav)', function(data) {
  // 获取当前选中的导航栏的 ID
  var id = data.index;
  // 切换到对应的选项卡
  tabChange(id);
});

// 切换选项卡的函数
function tabChange(id) {
  // 切换到指定的选项卡
  tab.change('tab' + id);
}

上面的代码中，我们首先获取了 layui 的 Tab 实例，然后监听了导航栏的 tab 事件。当用户点击某个导航栏时，就会触发该事件，并且会传递一个 data 参数，其中包含了当前选中的导航栏的相关信息。我们从中获取了当前选中的导航栏的 ID，并且调用了 tabChange 函数来切换到对应的选项卡。

需要注意的是，我们在切换选项卡时，需要使用 tab.change 方法，并且传递选项卡的 ID 作为参数。选项卡的 ID 必须是以 "tab" 开头，并且后面跟着一个数字，例如 "tab1"、"tab2" 等。这个 ID 是在 HTML 中定义的，我们需要在 HTML 中给每个选项卡指定一个唯一的 ID。

layui侧边导航栏自动定位

可以通过监听滚动事件，获取当前滚动的位置，然后根据当前位置计算出应该高亮显示的导航栏项。

具体实现方法如下：

1. 给每个导航栏项添加一个 ID，例如第一项的 ID 为 "nav1"，第二项的 ID 为 "nav2"，以此类推。

2. 监听页面滚动事件，获取当前滚动的位置：

window.addEventListener('scroll', function () {
  var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  // scrollTop 就是当前滚动的位置
});

3. 根据当前滚动的位置计算出应该高亮显示的导航栏项：

var nav1 = document.getElementById('nav1');
var nav2 = document.getElementById('nav2');
// ...

if (scrollTop >= nav1.offsetTop && scrollTop < nav2.offsetTop) {
  // 高亮显示导航栏第一项
  nav1.classList.add('active');
  nav2.classList.remove('active');
  // ...
} else if (scrollTop >= nav2.offsetTop && scrollTop < nav3.offsetTop) {
  // 高亮显示导航栏第二项
  nav1.classList.remove('active');
  nav2.classList.add('active');
  // ...
} else {
  // 其他情况，不高亮显示任何导航栏项
  nav1.classList.remove('active');
  nav2.classList.remove('active');
  // ...
}

4. 最后，给高亮显示的导航栏项添加一个样式，例如：

.active {
  background-color: #f00;
  color: #fff;
}

这样就可以实现侧边导航栏的自动定位了。