Выделите кнопку на веб-странице, если пользователь не нажал - PullRequest
Новая
       2

Выделите кнопку на веб-странице, если пользователь не нажал

2 голосов
/ 12 июня 2019

В поисках способа выделить кнопки, которые Пользователь не посещал, в случае изменения содержимого представлений, которые перенаправляются при нажатии этих кнопок.Решение должно быть в рамках ASP.net MVC CSS.

<head>
<style type="text/css">

 body{
     overflow-x:scroll;
 }
    .auto-stylelay1 {
        font-size: 18px;
        text-align: left;
        cursor: pointer;
    }
</head>
<div id="sidebar-wrapper">
        <ul class="sidebar-nav">
            <li class="sidebar-brand" style="font-size: 22px">
                <a href="#">
                    <strong>
                </strong>
                </a>
            </li>
         <b></b>
                <p class="auto-style2"><strong>Hello @User.Identity.Name!</strong></p> 
                <li class="auto-stylelay1">@Html.ActionLink("Home", "Index", "Home")</li>
                <li class="auto-stylelay1">@Html.ActionLink("Proof of Concept", "POC", "Home")</li>
                <li class="auto-stylelay1">@Html.ActionLink("Reports", "report", "Home")</li>
                <li class="auto-stylelay1">@Html.ActionLink("Links/Other Resources", "Links", "Home")</li>
                <li class="auto-stylelay1">@Html.ActionLink("About", "About", "Home")</li>
                <li class="auto-stylelay1">@Html.ActionLink("Contact", "Contact", "Home")</li>
        </ul>
    </div>

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

Я ожидаю, что кнопка будет подсвечена каким-то новым индикатором содержимого.По сути, я хочу изменить стили классов для ссылок действий HTML в зависимости от того, посетил ли пользователь эту страницу или нет.Если кнопка нажата, я хочу вернуть класс к auto-stylelay1.

1 Ответ

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

Возможное решение - сохранить его в локальном хранилище.

Сначала присвойте идентификатор каждому элементу списка: 

<li id="Home" class="auto-stylelay1">@Html.ActionLink("Home", "Index", "Home")</li>
<li id="POC" class="auto-stylelay1">@Html.ActionLink("Proof of Concept", "POC", "Home")</li>
<li id="Reports" class="auto-stylelay1">@Html.ActionLink("Reports", "report", "Home")</li>

Если кнопка нажата, добавьте ее в массив и сохраните в локальном хранилище: 

$("a").on("click", function (e) {
   e.preventDefault(); // stop following link

   var retrievedDate = localStorage.getItem("buttonsClicked");
   var buttonsClicked = JSON.parse(retrievedData);
   var elementId = $(this).attr('id') // Get Id of element
   buttonsClicked.push(elementId);
   localStorage.setItem("buttonsClicked", JSON.stringify(buttonsClicked.push)); // save back
   window.location = $(this).attr('href'); // now follow link
});

Теперь при просмотре нагрузки вы должны прочитать и посмотреть, какие из них были нажаты: 

$(document).ready(function() {
   var retrievedDate = localStorage.getItem("buttonsClicked");
   var buttonsClicked = JSON.parse(retrievedData);
   // loop through array
   buttonsClicked.each(function (index, value) {
       $("#"+value).addClass("auto-stylelay1");
   });
});

Вы можете поместить скрипт в представление _Layout.
Примечание: я не проверял это. Дайте мне знать, если это сработало.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...