Question

我在设置导航栏时遇到问题，根据我在页面上的部分显示更改。 Hover工作得很好，但是当我在不同的页面上时它不会只保持常规样式，但它应该处于悬停状态。

这就是我的导航在 HTML

中的样子

    <nav id="primary">
            <ul> 
                <li>
                    <a class="home" href="#home">MAIN_PAGE</a>
                </li>
                <li>
                    <a class="challenge" href="#challenge">CHALLENGE</a>
                </li>
                <li>
                    <a class="zones" href="#zones">FIVE_LETHAL_ZONES</a>
                </li>
                <li>
                    <a class="sprintframe" href="#sprintframe">SPRINTFRAME</a>
                </li>
                <li>
                    <a class="hybridtouch" href="#hybridtouch">HYBRIDTOUCH</a>
                </li>
                <li>
                    <a class="micoach" href="#micoach">MICOACH_SPEED_CELL</a>
                </li>
                <li>
                    <a class="traxion" href="#traxion">TRAXION_2.0_FG</a>
                </li>
                <li>
                    <a class="shop" href="#shop">SHOP_NOW</a>
                </li>
            </ul>
        </nav>

这就是我的 CSS 导航样式的样子（png是2种颜色的2个点。）

nav#primary {
    z-index: 100000000;
    position: fixed;
    top: 50%;
    right: 16px;
    margin-top: -40px;
}
nav#primary li {
    position: relative;
    height: 20px;
}
nav#primary a {
    display: block;
    width: 20px;
    height: 20px;
    text-indent: -9999px;
    background: transparent url('../images/nav-dot.png') 4px 4px no-repeat;
}

nav#primary a:hover, nav#primary a.active {
    background: transparent url('../img/nav-dot.png') 4px -16px no-repeat;
}

Answer 1

尝试这种方式可以帮助您：

<div class="menuBar">
    <ul>
        <li class="selected"><a href="index.php">HOME</a></li>
        <li><a href="two.php">PORTFOLIO</a></li>
        ....
    </ul>
</div>

Answer 2

试试这个js

$('.menuBar a').click(function(){
    $('.menuBar a').removeClass('active');
    $(this).addClass('active');
});

您可以将此代码添加到end of your html file（</body>之前）

<script src="http://code.jquery.com/jquery-1.10.2.min.js" ></script>
<script>
    $('.menuBar a').click(function(){
         $('.menuBar a').removeClass('active');
         $(this).addClass('active');
});
</script>

CSS导航当前页面

2 个答案: