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 左侧导航栏去除高亮

LayUI是一个界面美观易用的前端UI框架，其中的导航菜单可以实现高亮显示当前所在页面，但有时候我们可能需要去除这种高亮效果。

具体实现方法如下：

1. 修改lay-side-scroll.js文件

打开该文件，找到下面这段代码：

$(parent.sideDOM).find('.layui-nav-itemed,.layui-nav-itemed > a').removeClass('layui-nav-itemed');
$(parent.sideDOM).find('.layui-nav-child dd.layui-this').removeClass('layui-this');

将其中的removeclass('layui-nav-itemed')和removeclass('layui-this')注释掉即可。

2. 修改lay/modules/side.js文件

打开该文件，在layinit函数中找到下面这段代码：

navs.find('a').each(function () {
    var a = $(this);
    if (a[0].href === urlFullPath) {
        selAry.push(a);
        currTag = a.parent();
        return false;
    }
});

将其中的currTag = a.parent();注释掉即可。

这样修改后，导航栏将不再高亮显示当前所在页面。

需要注意的是，如果使用了LayUI的模块化开发方式，则需要将修改后的js文件打包并重新引用。