How to use jQuery in ASP.NET to change color of 'li'?

Question

I am trying to change the color of all the <li> links on web app using jQuery, but don't know why it is not working?

I have my style statement at the top in my layout.cshtml page, and the jQuery function at the bottom.

   <!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>

What is it that I am doing wrong?

the problem is that during bootstrapping of the page jquery can't process those tags — Theophilus Omoregbee, Feb 27 '17 at 21:06
Remove any code that is actually commented out from your example. I'm pretty sure `@* *@` comments code out in razor syntax. Also, look at your console (F12 on most browsers) and see if there are any errors. — Heretic Monkey, Feb 27 '17 at 21:07
http://stackoverflow.com/questions/11425158/jquery-on-method-with-load-event and check on JQuery .on which can always help you bootstrap and no need to be on every page for some event — Theophilus Omoregbee, Feb 27 '17 at 21:12
No errors in the console. Removed all the commented out codes and still nothing. Don't know what is wrong? — Truecolor, Feb 27 '17 at 21:14
You are coloring links within a ``li``. Your css should be ``li a { }`` not just ``li { }``, see http://stackoverflow.com/questions/1585855/setting-font-color-of-a-inside-a-li-tag — Rick Burns, Feb 27 '17 at 21:20
@Rick, I did `$('li a').addClass('emphasis');` as @Rion had suggested. Still doesn't work. — Truecolor, Feb 27 '17 at 21:30
@Truecolor The question is just Html and jQuery. Could you post your code at [jsfiddle.net](http://jsfiddle.net)? — Win, Feb 27 '17 at 21:30
@Truecolor, you don't need jquery to do any of that, remove it and change it in the `` — Rick Burns, Feb 27 '17 at 21:31

Rick Burns · Answer 1 · 2017-02-27T21:50:33.057

2

Here are a few options...

JavaScript

If you're trying to color the bullet, working jsfiddle

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

If you're trying to color the hyperlink, working jsfiddle

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

If you're trying to color both the bullet and the hyperlink, working 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;}

edited Feb 27 '17 at 21:50

answered Feb 27 '17 at 21:39

Rick Burns

1,538
16
20

But my links aren't ` – Truecolor Feb 27 '17 at 21:45
1

@Truecolor - look at the html your generating - `ActionLink()` generates an `` tag. – Feb 27 '17 at 21:46

score 1 · Accepted Answer · answered Feb 28 '17 at 21:45

1

So, after a lot of trials & errors, found out I was using the wrong selector. Posting the answer just in case if someone else has this issue.

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

answered Feb 28 '17 at 21:45

Truecolor

437
2
6
22

Rion Williams · Answer 3 · 2017-02-27T21:24:45.613

0

Ensure that you wrap your <script> code within a document-ready block so that it executes when your page (and dependencies) have been loaded :

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

edited Feb 27 '17 at 21:24

answered Feb 27 '17 at 21:00

Rion Williams

74,820
37
200
327

I had tried it that way also, but still the same. Do I have to do it in each page's Index views instead of the layout page? – Truecolor Feb 27 '17 at 21:07
I just noticed that you have actual links within your `
` elements, which will slightly change how you need to target those to color them. You'll need to either use the `$('li a')` selector to target the links, or adjust your CSS to explicitly target any `` elements below the emphasis element using `.emphasis a { color: indianred; }`. Additionally, try checking your Developer Tools (F12) to ensure that your actual jQuery code is being loaded as expected and that there aren't any errors within the Console.

Rion Williams

Feb 27 '17 at 21:26

Nothing worked. I was only able to change the color of the University, using the `.navbar-brand` class. – Truecolor Feb 28 '17 at 15:47

score -2 · Answer 4 · answered Feb 27 '17 at 21:15

-2

try to make a static html

without change the jquery code to see if its works .

  <li>test</li>

if it works , that means your Jquery code fired before your html li is generated.

answered Feb 27 '17 at 21:15

uonlyYOLOonce

45
10

obviously the case – Theophilus Omoregbee Feb 27 '17 at 21:15
should be a comment anyway – Theophilus Omoregbee Feb 27 '17 at 21:16
Yes, the "test" showed up in color. So, what am I doing incorrectly? I thought I am supposed to have the jQuery statement at the bottom of the page? – Truecolor Feb 27 '17 at 21:19
1

I don't have enough points to comment rather than my own post . Warp you JQuery function in $(document).ready(function () { }. JQuery statement at the bottom doesn't necessary mean it will be execute last . http://stackoverflow.com/questions/1795438/load-and-execution-sequence-of-a-web-page – uonlyYOLOonce Feb 27 '17 at 21:49

How to use jQuery in ASP.NET to change color of 'li'?

4 Answers4