單擊元素后將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更改不是持久的。 正是您所說的： this problem occurred because of refreshing the page after clicking 。

要具有此行為，您必須在頁面加載時進行更改，而不是在單擊鏈接時進行更改，因為在加載新頁面時這些更改將丟失。

您必須閱讀URL，“發現”必須更改的鏈接並執行適當的操作。

例如，假設您在http://exampledomain.com上有3個鏈接，每個鏈接都以這種方式指向：

• 鏈接1： http://exampledomain.com/about-us ： http://exampledomain.com/about-us
• 鏈接2： http://exampledomain.com/buy-something ： http://exampledomain.com/buy-something
• 鏈接3： http://exampledomain.com/find-my/dog ： 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;
    }
});