Question

所以我使用图像创建了一个导航栏，此时，当我将鼠标悬停在它们上方时，图像会变为顶部有一个红色条。我希望在用户点击时保留此红色栏，以便他们可以看到他们当前所在的页面。我知道我需要Javascript和点击功能，也许是为了给它一个活跃的课程，但我不知道如何做其余的事情。例如.active状态的CSS也是如此，因为条形图上的每个li都是不同的大小..这可能吗？！

HTML：

<ul id="nav-example">
    <li id="nav-example-01"><a href="#">Home</a></li>
    <li id="nav-example-02"><a href="#">Solar PV Portfolio</a></li>
    <li id="nav-example-03"><a href="#">Ancillary</a></li>
    <li id="nav-example-04"><a href="#">Electrical Services</a></li>
    <li id="nav-example-05"><a href="#">Case Studies</a></li>
    <li id="nav-example-06"><a href="#">Contact</a></li>
    <li id="nav-example-07"><a href="#">News</a></li>
    <li id="nav-example-08"><a href="#">Referral Scheme</a></li>
</ul>

CSS：

#nav-example {
    background:url("nav2.jpg") no-repeat;
    width: 1000px;
    height: 47px;
    margin: 0;
    padding: 0;
}

#nav-example li, #nav-example a {
    height: 47px;
    display: block;
}

#nav-example li {
    float: left;
    list-style: none;
    display: inline;
    text-indent: -9999em;
}

#nav-example-01 { width: 70.5px; }
#nav-example-02 { width: 178.5px; }
#nav-example-03 { width: 100.5px; }
#nav-example-04 { width: 185.5px; }
#nav-example-05 { width: 135px; }
#nav-example-06 { width: 92px; }
#nav-example-07 { width: 67.5px; }
#nav-example-08 { width: 170.5px; }

#nav-example-01 a:hover { background:url("nav2.jpg") 0px -47px no-repeat; }
#nav-example-02 a:hover { background:url("nav2.jpg") -70.5px -47px no-repeat; }
#nav-example-03 a:hover { background:url("nav2.jpg") -248.5px -47px no-repeat; }
#nav-example-04 a:hover { background:url("nav2.jpg") -349px -47px no-repeat; }
#nav-example-05 a:hover { background:url("nav2.jpg") -534.5px -47px no-repeat; }
#nav-example-06 a:hover { background:url("nav2.jpg") -669.5px -47px no-repeat; }
#nav-example-07 a:hover { background:url("nav2.jpg") -761.5px -47px no-repeat; }
#nav-example-08 a:hover { background:url("nav2.jpg") -829px -47px no-repeat; }

JAVASCRIPT：

$("#nav-example a").on('click', function () {
            $("#nav-example a").removeClass('active');
            $(this).addClass('active');
        });

非常感谢任何帮助！

CSS图像导航栏 - 想要Javascript单击以保留悬停图像

0 个答案: