#c# #html #visual-studio-2019
#c# #HTML #visual-studio-2019
Вопрос:
Как переключать цвет между шестью параметрами, например, при нажатии (Home) цвет текста становится красным, а при нажатии (Projects) и при нажатии (Timesheet) цвет становится красным, а другие остаются неизменными и так далее с другими, с помощью Visual Studio asp.netядро 3.1
Код для(_Layout.cshtml)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@ViewData["Title"] - Bearu Firtas</title>
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/css/site.css" />
</head>
<body id="body">
<header>
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-5">
<div class="container">
<a class="navbar-brand" asp-area="" asp-page="/Index">Bureau Veritas</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse">
<ul class="navbar-nav flex-grow-1">
<li class="nav-item">
<a class="nav-link text-dark color-toggle" asp-area="" asp-page="/Index">Home</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark color-toggle" asp-area="" asp-page="/Proposel">Proposels</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark color-toggle" asp-area="" asp-page="/Project">Projects</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark color-toggle" asp-area="" asp-page="/TimeSheet">TimeSheet</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark color-toggle" asp-area="" asp-page="/Report">Reports</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark color-toggle" asp-area="" asp-page="/Invoice">Invoice By Month</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark color-toggle" asp-area="" asp-page="/Certificate">Certificates</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<div class="container">
<main role="main" class="pb-3">
@RenderBody()
</main>
</div>
<!--<footer class="border-top footer text-muted">
<div class="container">
amp;copy; 2020 - BearuFirtas_App
</div>
</footer>-->
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
@RenderSection("Scripts", required: false)
</body>
</html>
код для (site.js )
const nodes = document.querySelectorAll('.color-toggle');
nodes.forEach((node) => {
node.addEventListener('click', (e) => {
nodes.forEach(ele => {
if (ele === e.target) {
ele.style.color = 'red'
} else {
ele.style.color = 'black'
}
})
})
})
Изображение макета,
Комментарии:
1. Итак, вы в основном хотите выделить текст, на который нажимается, а другой должен оставаться в состоянии по умолчанию.
2. как только я нажимаю на текст (например, щелкая на «Домашней» странице), он меняет свой цвет на красный, а с другой стороны, когда я нажимаю на другой текст (например, щелкая на странице «Проекты»), он меняет свой цвет на красный, но в то же время, «Домашний» текст возвращается к своему черному цвету и так далее.
3. Понял, я добавлю ответ ниже
4. Теперь я добавил ответ
Ответ №1:
Вам нужно добавить color-toggle класс на все эти вкладки в панели навигации и включить приведенный ниже скрипт,
const nodes = document.querySelectorAll('.color-toggle');
nodes.forEach((node) => {
node.addEventListener('click', (e) => {
nodes.forEach(ele => {
if(ele === e.target){
ele.style.color = 'red !important'
} else {
ele.style.color = 'black !important'
}
})
})
}) <div class="color-toggle">Home</div>
<div class="color-toggle">Projects</div>
<div class="color-toggle">Section 3</div>
<div class="color-toggle">Others</div> Обновление 1: согласно комментарию, при использовании кода для <a> тега вы должны использовать !important , чтобы переопределить стиль <a> тега по умолчанию.
Комментарии:
1. например, когда я добавляю переключатель цвета в этот код, это ничего не меняет на запущенном веб-сайте. <div class=»панель навигации-свернуть свернуть d-sm-inline-flex flex-sm-row-reverse»> <ul class=»navbar-nav flex-grow-1″> <li class=»nav-item»>темный цвет — переключить » asp-area=»» asp-page=»/Index»>Home</a> </ li> </ div>
2. Я мог бы помочь вам гораздо лучше, если бы вы поделились немного большей частью кода, т.Е. с большим количеством вкладок, чтобы я мог воспроизвести ошибку и попытаться ее исправить
3. я отредактировал приведенный выше код в качестве вашего решения, цвет меняется только при добавлении <div class=color-toggle>Home</div> , но при добавлении»> Главная страница </a> это не работает при нажатии на вкладку.
4. Я обновил код, попробуйте использовать это, также дал объяснение для вашей ссылки.
Ответ №2:
добавьте что-то подобное в свой js:
document.getElementById("home").addEventListener("click", Red, false) //add id home to your home button
document.getElementById("projects").addEventListener("click", Black, false)//add id projects to your home button
document.getElementById("timestamp").addEventListener("click", Blue, false)//add id home to your timestamp button
function Red () {
document.getElementById("body).style.color = "red";
}
function Black () {
document.getElementById("body).style.color = "black";
}
function Blue () {
document.getElementById("body).style.color = "blue";
}