时间戳

首页 > 解决方案 > 如何使用javascript更改导航元素内多级手风琴菜单的子菜单的背景颜色

javascript - 如何使用javascript更改导航元素内多级手风琴菜单的子菜单的背景颜色

问题描述

我的 Html 代码使用 LI 元素创建了一个 UL 列表，而 UL 列表位于 html 代码中的 NAV 标记内。

我想更改所有链接的背景颜色。为此，我想要任何 JS (javascript)，它可以按照上面的代码要求在 nav 元素内的 UL 元素内获取所有 LI 元素。

请查找提到的ID为

id="sidemenu" , id="accordionSideMenu"

我如何在 javascript 中使用这些 div 和 ul 标记的 id，以便我可以更改 UL 列表的背景颜色。

标签： javascriptjquerymenuaccordionmulti-level

解决方案

我曾经在这里问过一个问题，我们如何在运行时通过代码中的外部 CSS 文件更改特定组件样式的样式表。

多级菜单需要更改为水平导航栏。

我尝试了很多资源，但没有成功。

几天后，我在youtube上获得了一个资源并获得了成功。

我将代码放在这里作为解决方案。

HTML 代码：

<head>
<link id="pagestyle" rel="stylesheet" type="text/css" href="default.css">
<script>
function swapStyleSheet(sheet){
    document.getElementById('pagestyle').setAttribute('href', sheet);
}
</script>
</head>




<body>
<h2>Javascript Change StyleSheet Without Page Reload</h2>
<button onclick="swapStyleSheet('dark.css')">Dark Style Sheet</button>
<button onclick="swapStyleSheet('blue.css')">Blue Style Sheet</button>
<button onclick="swapStyleSheet('default.css')">Default Style Sheet</button>
</body>

dark.css 代码：

h2{ 字体大小：40px; 颜色：黑色 }

default.css 代码

h2{ 字体大小：35px; 颜色：绿色

}

blue.css 代码

h2{ 字体大小：30px; 颜色：蓝色

}

正如我所读到的，在 Bootstrap 中，我们可以通过单个 scss 文件来完成，但我是 bootstrap 中的新手。

我希望，这个小代码会有用。

推荐阅读