javascript - 单击元素后向元素添加 css 类

Question

我正在尝试在单击元素后将 css 类添加到它。但我做不到。我此操作的目标是，在我的第一级菜单中，当我单击某个元素时，它会以另一种颜色显示。

例如访问此链接。

http://www.templatemonster.com/demo/50935.html

这个问题可能是点击后刷新页面导致的!我不知道。

我该怎么做？

(我使用过 ASP.NET 和 Umbraco CMS)

 <script type="text/javascript">
jQuery(function (evt) {
    $("[class*='firstLevelOfMenu'] ").click(function (event) {
        event.stopPropagation(); // stops click event from bubbling up from child
        $(this).addClass('current-menu-item page_item page-item-203 current_page_item');
    });
})

</script>

MyHelpers.cshtml:

@helper Navigation(int parentId, int depthNavigation = 3)
{
IPublishedContent parent = Node.ContentCache.GetById(parentId);
if (parent.Level <= (depthNavigation - 1) &&        parent.GetPropertyValue("UmbracoNaviHide").Equals(false) &&    parent.Children().Count() > 0)
{
if (parent.Level > 1)
{
        <ul style="visibility: hidden; display: none;" class="sub-menu">
            @foreach (IPublishedContent child in parent.Children())
            {
                if (child.Level <= depthNavigation &&    child.GetPropertyValue("UmbracoNaviHide").Equals(false))
                {
                    <li class="menu-item menu-item-type-post_type menu-item-   object-page">
                        <a href="@child.Url">@child.Name</a>
                        @Navigation(child.Id, depthNavigation)
                    </li>
                }
            }
        </ul>
    }
    else
    {
        foreach (IPublishedContent child in parent.Children())
        {
            if (child.Level <= depthNavigation && child.GetPropertyValue("UmbracoNaviHide").Equals(false))
            {
                <li id="menu-item-@child.Id" class="firstLevelOfMenu 
                    menu-item
                     menu-item-type-post_type
                     menu-item-object-page">

                    <a href="@child.Url">@child.Name</a>
                    @Navigation(child.Id, depthNavigation)
                </li>
            }
        }
    }
}
else
{
    foreach (IPublishedContent child in parent.Children())
    {
        if (child.Level <= depthNavigation && child.GetPropertyValue("UmbracoNaviHide").Equals(false))
        {
            <li>
                <a href="@child.Url">@child.Name</a>
                @Navigation(child.Id, depthNavigation)
            </li>
    }
}
}
}

Answer 1

DOM 更改不是持久的。正如您所说:发生此问题是因为单击后刷新页面。

要实现此行为，您必须在页面加载时进行更改，而不是在单击链接时进行更改，因为这些更改将在加载新页面时丢失。

您必须阅读 URL，“发现”必须更改的链接并采取适当的措施。

例如，假设您在 http://exampledomain.com 上有 3 个链接，每个链接都这样指向:

• 链接 1:http://exampledomain.com/about-us
• 链接 2:http://exampledomain.com/buy-something
• 链接 3:http://exampledomain.com/find-my/dog

那么，你应该有这个脚本:

$( document ).ready(function() {
    /* This will get the path part of the
     * URL (The string after the domain) and
     * split it into an array .*/
    var path = window.location.pathname.split("/");

    /* The we will remove the starting / if there's any */
    if (path.length > 1) {
        path.splice(0, 1);
    }

    /* We check if there's actually a path */
    if (path.length > 0) {
        return;
    }

    /* And then, we check for the different links */
    switch(path[0]) {
        case "about-us":
            $("#link1").addClass('yeah');
            break;
        case "buy-something":
            $("#link2").addClass('yeah');
            break;
        case "find-my":
            $("#link3").addClass('yeah');
            break;
    }
});