如何在 ASP.NET 中使用 jQuery 更改“li”的颜色？答案

【问题标题】：How to use jQuery in ASP.NET to change color of 'li'?如何在 ASP.NET 中使用 jQuery 更改“li”的颜色？
【发布时间】：2017-07-18 15:35:57
【问题描述】：

我正在尝试使用 jQuery 更改 Web 应用程序上所有 <li> 链接的颜色，但不知道为什么它不起作用？

我的 layout.cshtml 页面顶部有我的样式声明，底部有 jQuery 函数。

   <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - Contoso University</title>

    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)

    <style>
         li {color: blue;}
        .emphasis {color: indianred;}
    </style>

</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                @Html.ActionLink("Contoso University", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li>@Html.ActionLink("Home", "Index", "Home")</li>
                    <li>@Html.ActionLink("About", "About", "Home")</li>
                    <li>@Html.ActionLink("Contact", "Contact", "Home")</li> 

                    @if (User.Identity.IsAuthenticated)
                    {
                        if (!User.IsInRole("Instructor"))
                        {
                            <li>@Html.ActionLink("Students", "Index", "Student")</li>
                        }
                        <li>@Html.ActionLink("Courses", "Index", "Course")</li>
                        <li>@Html.ActionLink("Instructors", "Index", "Instructor")</li>
                        if (!User.IsInRole("Student") && !User.IsInRole("Instructor"))
                        {
                            <li>@Html.ActionLink("Departments", "Index", "Department")</li>
                        }
                        if (!User.IsInRole("Student"))
                        {
                            <li>@Html.ActionLink("Enrollments", "Index", "Enrollment")</li>
                        }
                    }

                </ul>
                @Html.Partial("_LoginPartial")
            </div>
        </div>
    </div>
    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; @DateTime.Now.Year - Contoso University</p>
        </footer>
    </div>

    @*<script>
        $('li').addClass('emphasis');        
    </script>*@

    <script>
        $(function () {
            $('li').addClass('emphasis');
        });
    </script>

</body>
</html>

我做错了什么？

【问题讨论】：

你能显示你的 li 标记吗？
你是否在你的页面中添加了 jquery 库
是的，它是最新版本。
问题是在页面引导过程中 jquery 无法处理这些标签
您正在为li 中的链接着色。您的 css 应该是 li a { } 而不仅仅是 li { }，请参阅 stackoverflow.com/questions/1585855/…

标签： javascript jquery html css asp.net-mvc-5

【解决方案1】：

这里有几个选项...

JavaScript

如果你想给子弹上色，工作jsfiddle

$('li').addClass('emphasis');

如果您尝试为超链接着色，请使用jsfiddle

$('li a').addClass('emphasis');

如果您要同时为项目符号和超链接着色，请使用 jsfiddle

$('li a, li').addClass('emphasis');

HTML

<li><a href="http://www.google.com">TEST 1</a></li>
<li><a href="http://www.google.com">TEST 2</a></li>
<li><a href="http://www.google.com">TEST 3</a></li>
<li><a href="http://www.google.com">TEST 4</a></li>
<li><a href="http://www.google.com">TEST 5</a></li>

CSS

li {color: blue;}
.emphasis {color: indianred;}

【讨论】：

但我的链接不是<a href= 链接。它们是辅助函数@Html.ActionLink。是一样的吗？感谢您的帮助，我将进一步研究以使这项工作发挥作用。
@Truecolor - 查看你生成的 html - ActionLink() 生成一个 <a> 标记。

【解决方案2】：

确保将 <script> 代码包装在文档就绪块中，以便在加载页面（和依赖项）时执行：

<script>
    // This will not execute until jQuery (and your page) have been loaded
    $(function(){
        $('li a').addClass('emphasis');       
    });
</script>

【讨论】：

我也试过这样，但还是一样。我是否必须在每个页面的索引视图而不是布局页面中执行此操作？
我刚刚注意到您的<li> 元素中有实际链接，这将稍微改变您需要针对这些元素着色的方式。您需要使用$('li a') 选择器来定位链接，或者调整您的CSS 以使用.emphasis a { color: indianred; } 明确定位强调元素下方的任何<a> 元素。此外，请尝试检查您的开发人员工具 (F12) 以确保您的实际 jQuery 代码按预期加载并且控制台中没有任何错误。
没有任何效果。我只能使用 .navbar-brand 类更改大学的颜色。

【解决方案3】：

所以，经过多次试验和错误，我发现我使用了错误的选择器。发布答案以防万一其他人遇到此问题。

 <script>
        $('.navbar-inverse .navbar-nav > li > a').css('color', 'red');
 </script>

【讨论】：

【解决方案4】：

尝试制作静态html

不改变jquery代码，看看它是否工作。

  <li>test</li>

如果它有效，这意味着你的 Jquery 代码在你的 html li 生成之前被触发了。

【讨论】：

显然是这样
无论如何都应该是评论
是的，“测试”以彩色显示。那么，我做错了什么？我以为我应该在页面底部有 jQuery 语句？
我没有足够的积分来评论而不是我自己的帖子。在 $(document).ready(function () { } 中扭曲你的 JQuery 函数。底部的 JQuery 语句并不一定意味着它将最后执行。stackoverflow.com/questions/1795438/…