Как изменить цвет фона подменю многоуровневого аккордеонного меню внутри элемента nav с помощью JavaScript - PullRequest
Новая
       45

Как изменить цвет фона подменю многоуровневого аккордеонного меню внутри элемента nav с помощью JavaScript

0 голосов
/ 26 декабря 2018

Мой HTML-код создает список UL с элементом LI, а список UL находится внутри тега NAV в HTML-коде.

Я хочу изменить цвет фона всей ссылки.для этого мне нужен любой JS (javascript), который может принимать все элементы LI внутри элемента UL внутри элемента nav в соответствии с приведенным выше требованием к коду.

Пожалуйста, найдите упомянутые идентификаторы как

id = "sidemenu", id =" accordionSideMenu "

как я могу использовать эти id тега div и ul в javascript, чтобы я мог изменить цвет фона списка UL.

Ответы [ 2 ]

0 голосов
/ 29 июня 2019

Я задал здесь один вопрос раньше, как мы можем изменить таблицу стилей во время выполнения для стилизации конкретного компонента с помощью внешнего CSS-файла в коде.

Изменение было необходимо для многоуровневого меню в виде горизонтальной навигацииbar.

Я пробовал так много ресурсов, но не добился успеха.

Через несколько дней я получил один ресурс в YouTube и добился успеха.

Iя помещаю код здесь как решение.

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 {font-size: 40px;цвет: черный}

default.css код

h2 {размер шрифта: 35 пикселей;цвет: зеленый

}

blue.css код

h2 {размер шрифта: 30 пикселей;цвет: синий

}

Как я читал, в Bootstrap мы можем сделать это одним файлом scss, но я новичок в начальной загрузке.

Надеюсь, этот небольшой код будетполезно.

0 голосов
/ 26 декабря 2018

, чтобы сделать это, просто используйте css-селектор в js.Использование JQUERY 

$("#sidemenu ul").css("background-color", "black");
...