如何将活动菜单项聚焦在侧边栏中?

时间:2013-11-14 05:38:11

标签: jquery html css css3

这是我的侧边栏代码

<div><ul class="menusubnav">
<li class="orange"><a href="Managerhomepage.php">Manager</a></li>
<li><a href="addcustomerpage.php">New Customer</a></li>
<li><a href="EditCustomer.php">Edit Customer</a></li>
<li><a href="DeleteCustomerInput.php">Delete Customer</a></li>
<li><a href="addAccount.php">New Account</a></li>
<li><a href="editAccount.php">Edit Account</a></li>
<li><a href="deleteAccountInput.php">Delete Account</a></li>
<li><a href="MiniStatementInput.php">Mini Statement</a></li>
<li><a href="CustomisedStatementInput.php">Customised Statement</a></li>
<li><a href="Logout.php">Log out</a></li>
</ul></div>

这是我的css代码

.menusubnav li{
    margin-top:0px; padding:0;
    list-style:none;
}
.menusubnav a{
    margin-left:0px;
    margin:0px; padding:10px; display:block;
    border-bottom: 1px solid #e0e0e0;
    font: 12px "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, Verdana, sans-serif;
    text-decoration:none; color: #333;
}
.menusubnav a:hover{
    background-color:#FEF5EE;
}
.menusubnav a:active{
    outline:none;
    border-color:#ffa853;
    background-color:#FF6600;
    box-shadow:0 0 10px #ffa853;
}

这是我的jsfiddle

请帮我解决这个问题。我想聚焦或改变侧边栏菜单的活动链接的颜色。 请帮忙。

3 个答案:

答案 0 :(得分:5)

只需在活动菜单中添加一个类。

.active {
    outline:none;
    border-color:#ffa853;
    background-color:#FF6600;
    box-shadow:0 0 10px #ffa853;
}

e.g。

<div><ul class="menusubnav">
<li class="active"><a href="Managerhomepage.php">Manager</a></li> <--look here
<li><a href="addcustomerpage.php">New Customer</a></li>
<li><a href="EditCustomer.php">Edit Customer</a></li>
<li><a href="DeleteCustomerInput.php">Delete Customer</a></li>
<li><a href="addAccount.php">New Account</a></li>
</ul></div>

http://jsfiddle.net/b4U3n/1/

因此,当您加载页面时,只需将class="active"添加到侧边栏菜单的当前活动链接。

<强>更新

服务器端代码

<div><ul class="menusubnav">
<li <?php if($current_page == Managerhomepage.php){ echo 'class="active"'; } ?> ><a href="Managerhomepage.php">Manager</a></li>
</ul></div>

注意:不完全是怎么做的,但这就是如何做到这一点的概念。我假设您会理解这一点,因为您的链接会重定向到php页面

答案 1 :(得分:0)

如果您使用Wordpress平台,那么它非常简单。只需添加一个名为.current_page_item a的类,然后根据需要设置样式。无论菜单项如何,它都适用于每个导航菜单。试试吧。我认为它会正常工作。

答案 2 :(得分:-1)

尝试以下几点:

$('.menusubnav a').click(function() {
   $('.menusubnav a').css('background', '#ffffff');
     $(this).css('background-color', '#FF6600');
});

您可以将完整的css规则添加到每个css函数中。这会在每次单击一个菜单项时将所有菜单项设置为其默认条件,并更新单击的项。