单击元素后添加 css class

Question

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

例如访问这个 link.

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.

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

您必须阅读 URL、"discover" 必须更改的内容 link 并采取适当的措施。

例如，假设您在 http://exampledomain.com 上有 3 个 link，指向每个方向：

Link 1: http://exampledomain.com/about-us
Link 2: http://exampledomain.com/buy-something
Link3: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;
    }
});

单击元素后添加 css class

Add a css class to an element after clicking on it

javascript

css

jquery

umbraco