Question

我正在创建简单的侧边菜单，这样当用户将鼠标悬停在项目背景颜色更改上并且当他点击它时，应该保持悬停效果直到用户点击其他项目

我的代码：

 ul#nav {
    padding: 0;
    margin: 0 0 10px 0;
    -moz-appearance: menubar;
        -webkit-appearance: menubar;
    background-position: left;
    font-size: larger;
}

.mmenu{ width: 190px;
       position: fixed;
}
.mmenu a{
    font-size:14px;
    font-family: Arial, sans-serif;
    font-style: normal;
    font-weight:bold;
    display: block;
}

.mmenu a:hover{ color: white;
background-color: #003366;
font-style: oblique;
border-top: 0px outset #003366;
border-bottom: 0px inset #003366;
border-right:0px outset #003366;
border-left: 0px inset ;
}

悬停效果工作正常，但是当我点击任何项目时我没有保持样式，我尝试了活动，访问但没有运气。有谁知道问题出在哪里？

HTML

<div id="nav" class="mmenu" style="border: 2px double #f2f2f2; left: 25px; width: 200px; border-radius: 6px;">
                            <ul type="none">        
                                        <li><a  href="another example.php">Messages</a></li>
                                        <li><a  href= "example.php">My Conferences</a></li>

                                    </ul>
                                </div>

Answer 1

只需添加属性

即可

Onclick="this.style.background='#003366'"

到菜单项（“.mmenu a”）

Answer 2

当您点击导航项时，它是否链接到另一个页面？在这种情况下，您需要使用类向导航项和样式添加类。

<style>
body.page-name-1 #nav li.page-name-1 a, body.page-name-2 #nav li.page-name-2 a
{
    background-color: #003366;
}
</style>

<body class='<?php echo $page_name ?>'> 
<!-- If you are using PHP, and every page has a $page_name -->
<div id='nav' class='mmenu'>
<ul>
<li class='page-name-1' ><a href="another example.php">Messages</a></li>
<li class='page-name-2' ><a href= "example.php">My Conferences</a></li>
</ul>
</div>
...
</body>

更改活动菜单项的背景

2 个答案: