时间戳

首页 > 解决方案 > 如果登录用户未单击，则突出显示网页中的按钮

javascript - 如果登录用户未单击，则突出显示网页中的按钮

问题描述

寻找一种方法来突出显示用户未访问的按钮，以防更改单击这些按钮时重定向的视图的内容。解决方案应该在 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>

如果用户没有单击，我想更改菜单栏的布局样式页面按钮。我添加了一个检查以查看用户浏览过的位置。以及他们浏览的日期。但是我缺少对每个用户的共享布局文件进行更改的代码。

我希望通过一些新的内容指示器突出显示该按钮。基本上，我想根据用户是否访问此页面来更改 li html 操作链接的类样式。如果单击按钮，我想将类返回到 auto-stylelay1。

标签： javascripthtmlcssasp.netasp.net-mvc

解决方案

一种可能的解决方案是将其保存在本地存储中。

首先为每个列表项分配一个 id：

<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 视图中。
注意：我没有测试过这个。让我知道它是否有效。

推荐阅读