Highlight selected tab using jquery function in mvc4 project

Question

I would like to use a jquery 'click' event to change the class of the selected tab. The first tab is initially listed as selected. When I change tabs, I try to step into the click event but it is skipped. It reaches the function and then just skips over it. My project is MVC4 and my jquery library is 1.11.3.
This is my markup:

<header>
<div class="content-wrapper">            
    <p class="site-title">
        <img src="~/Images/logo.png" alt="" />
    </p>                        
    <nav>
        <ul id="menu" class="maintablist">
            <li class="selected">@Html.ActionLink("Home", "Index", "Home")</li>
            <li>@Html.ActionLink("About", "About", "Home")</li>
            <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
        </ul>
    </nav>              
</div>
</header>

This is my jquery function:

<script src="~/Scripts/jquery-1.11.3.js"></script>
<script>
    $("#menu li").click(function () {
        $("#menu li").removeClass("selected");
        $(this).addClass("selected");
    });
</script>

This is my style sheet stuff:

.maintablist {
    list-style:none;
    height: 2em;
    padding: 0;
    margin: 0;
    border: none;
}

.maintablist li {
    float: left;
    margin-right: 0.13em;
}

.maintablist li a {
    display:block;
    padding:0 1em;
    text-decoration:none;
    border:0.06em solid #000;
    border-bottom:0;
    font:bold 0.88em/2em arial,geneva,helvetica,sans-serif;
    color:#000;
    background-color:#ccc;

    /* CSS 3 elements */
    -webkit-border-top-right-radius:0.50em;
    -webkit-border-top-left-radius:0.50em;
    -moz-border-radius-topright:0.50em;
    -moz-border-radius-topleft:0.50em;
    border-top-right-radius:0.50em;
    border-top-left-radius:0.50em;
}

.maintablist li a:hover {
    background:#b5dbb6; 
    color:#fff;
    text-decoration:none;
}

.maintablist li.selected a {
    background-color: #b5dbb6;
    color: #fff;
}

Why isn't the click event recognized? I would like to do this on the client side and not have to go to the HomeController to do this. Thanks.

UPDATE Removed the 'click' event from within the 'ready' function and the class is removed. But the class is not added to my current selected tab. This is the code:

<script>
 $(".maintablist li").removeClass("selected");
 $(this).addClass("selected");
</script>

UPDATE Using this jquery function below, when a tab is clicked it removes the class attribute from all of the tabs. Then the clicked tab is displayed, the initial tab has the 'selected' coloring. All of the tabs should not have a class attribute defined but somehow the class attribute is reapplied to the initial tab yet the selected tab is displayed.

$(document).ready(function () {
    $("#mainmenu li").click(function () {
        $("#mainmenu li").removeClass("selected").removeAttr("class");
    });   
});

UPDATE I only posted the information that I believe was needed. But below is the code in the file, _Layout.cshtml

<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>@ViewBag.Title OnCall Schedule Tool</title>
    <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
    <meta name="viewport" content="width=device-width" />
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
    <link rel="stylesheet" href="~/Content/jquery-ui.css">
    <link rel='stylesheet' href='~/Content/fullcalendar.css' />
    <link rel='stylesheet' href='~/Content/spectrum.css'>
    <script src="~/Scripts/jquery-1.11.3.js"></script>
    <script src='~/Scripts/jquery.min.js'></script>
    <script src="~/Scripts/jquery-ui.js"></script>
    <script src='~/Scripts/moment.min.js'></script>
    <script src='~/Scripts/fullcalendar.js'></script>
    <script src="~/Scripts/spectrum.js"></script>
    <script src="~/Scripts/knockout-2.2.0.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#mainmenu li").click(function () {
                $("#mainmenu li").removeClass("selected").removeAttr("class");
            });   
        });              
    </script>
</head>
<body>
    <header>
        <div class="content-wrapper">            
            <p>
                <img src="~/Images/logo.png" alt="" />
            </p>                                     
            <nav>
                <ul id="mainmenu" class="maintablist">
                    <li class="selected">@Html.ActionLink("View OnCall Schedule", "ViewSchedule", "Home")</li>
                    <li>@Html.ActionLink("Edit OnCall Schedule", "EditSchedule", "Home")</li>
                    <li>@Html.ActionLink("Admin OnCall Application", "Admin", "Home")</li>
                </ul>
            </nav>                    
        </div>
    </header>
    <div id="body">
        @RenderSection("featured", required: false)
        <section class="content-wrapper main-content">
            @RenderBody()
        </section>
    </div> 
    @Scripts.Render("~/bundles/jquery")
    @RenderSection("scripts", required: false)
</body>
</html>

Gloria Santin · Accepted Answer · 2015-10-01 15:17:07Z

This is what worked for me. Thanks Miodrag for your help but the jquery did not work. I found on another post. I am using MVC4 and it uses those attributes, no jquery. On each page set the PageName attribute of ViewBag on each page like so:

Top of file EditSchedule.cshtml

@{
    ViewBag.PageName = "EditSchedule";
}

Top of file ViewSchedule.cshtml

@{
    ViewBag.PageName = "ViewSchedule";
}

Top of file Admin.cshtml

@{
    ViewBag.PageName = "Admin";
}

In _Layout.cshtml

<nav>
    <ul id="mainmenu" class="maintablist">
        <li class="@((ViewBag.PageName == "ViewSchedule") ? "selected" : "")">@Html.ActionLink("View OnCall Schedule", "ViewSchedule", "Home")</li>
        <li class="@((ViewBag.PageName == "EditSchedule") ? "selected" : "")">@Html.ActionLink("Edit OnCall Schedule", "EditSchedule", "Home")</li>
        <li class="@((ViewBag.PageName == "Admin") ? "selected" : "")">@Html.ActionLink("Admin OnCall Application", "Admin", "Home")</li>
    </ul>
</nav>

In Style.css file defining the look of the tabs:

.maintablist {
    list-style:none;
    height: 2em;
    padding: 0;
    margin-top: 20px;
    margin-bottom: 0;
}

.maintablist li {
    float: left;
    margin-right: 0.13em;
}

.maintablist li a {
    display:block;
    padding:0 1em;
    text-decoration:none;
    border:0.06em solid #000;
    border-bottom:0;
    font:bold 0.88em/2em arial,geneva,helvetica,sans-serif;
    color:#000;
    background-color:#ccc;

    /* CSS 3 elements */
    -webkit-border-top-right-radius:0.50em;
    -webkit-border-top-left-radius:0.50em;
    -moz-border-radius-topright:0.50em;
    -moz-border-radius-topleft:0.50em;
    border-top-right-radius:0.50em;
    border-top-left-radius:0.50em;
}

.maintablist li a:hover {
    background: #b5dbb6;
    color:#fff;
    text-decoration:none;
}

.maintablist li.selected a{
    background-color: #b5dbb6;
    color: #fff;
    border-bottom: 0;
}

mdr · Accepted Answer · 2015-09-29 09:53:34Z

0

You should put your javascript code into $(document).ready() function:

<script>
    $(document).ready(function() {
        <!-- put your javascript code here -->
    });
</script>

UPDATE

It just was in front of our eyes: You also need to prevent default behavior of anchor elements which causes page refreshing by returning false.

$("#mainmenu li").click(function () {
    $(this).siblings().removeClass("selected");
    $(this).addClass("selected");
    return false;
});

Additionally, I have to mention you use three references to jQuery. It should be only one and referenced anywhere before its first use (for example, before document ready function).

edited Sep 29, 2015 at 9:53

answered Sep 24, 2015 at 19:06

mdr

164 bronze badges

13 Comments

Gloria Santin Over a year ago

It is still skipping the click function. I can step into the .ready function but it will not step into the click function.

mdr Over a year ago

There are no other issues with code you posted. If you don't catch click event it could mean that jquery selector isn't right. Do you have another html element on the page with id="menu"?

Gloria Santin Over a year ago

There is not another element with that ID. I changed the selector to use the class name 'maintablist'. When I select another tab from the initial tab, it initially changes to the 'selected' color but after the page loads the tab changes back to the 'unselected' color.

mdr Over a year ago

A trick to preserve state across multiple pages would be to place navigation into their layout, that is a common practice. If that isn't the case, please post another code which could interfere with already posted one.

Gloria Santin Over a year ago

I was able to at least step into the ready document function by removing the click event. This now makes sense since the 'ready' event just initializes stuff. However, the class is removed. But I cannot figure out how to add a class to the selected tab. I added my code above, under 'UPDATE'

|

Collectives™ on Stack Overflow

Highlight selected tab using jquery function in mvc4 project

2 Answers 2

Comments

13 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

13 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related