Question

每当该页面处于活动状态时我需要更改所选菜单的颜色，并且它应该保持到单击另一个菜单为止。我使用了jquery，如

$('.navigation ul li a').click(function(){

 $(this).css({"background-color":"#ffffff"});
 $('.navigation ul li a').css({"background":"transparent"});

}）;

但它仅适用于点击功能。我需要它才能激活，直到我移动到另一个菜单.plz help !!!

Answer 1

仅限PHP

我们假设您的网站有以下菜单：

主页
手枪
步枪

在 Home HTML页面的顶部，插入：

<?php $this_page = "Home"; ?>

在 Pistols HTML页面的顶部，插入：

<?php $this_page = "Pistols"; ?>

在 Rifles HTML页面的顶部，插入：

<?php $this_page = "Rifles"; ?>

在您的css文件中，为菜单项添加一个带有附带格式的ID，该页面是浏览器中显示的页面。例如，请将此ID #cur_item称为。

修改导航HTML，如下所示：

<ul class="navigation">
    <li <?php if ($this_page == "Home"):?> id="cur_item" <?php endif; ?> >
        Home
    </li>
    <li <?php if ($this_page == "Pistols"):?> id="cur_item" <?php endif; ?> >
        Pistols
    </li>
    <li <?php if ($this_page == "Rifles"):?> id="cur_item" <?php endif; ?> >
        Rifles
    </li>
</ul>

Answer 2

您不需要使用任何jQuery，只需要CSS。

为页面提供您的正文标记和ID，即body id =“contact”
为每个菜单链接指定一个与正文ID匹配的类
为您的活动链接编写CSS：

body#home .navigation ul li a.home, 
body#services .navigation ul li a.services,
body#contact .navigation ul li a.contact {
    background-color: #ffffff
}

Answer 3

您需要为此

使用css a:active标记

Answer 4

$('.navigation ul li a').click(function () {

    $('.navigation ul li a').each(function () { // loop through all links
       if ($(this).hasClass('active')) $(this).removeClass('active'); // remove className 'active' from any link
    });

    $(this).addClass('active'); // className active to current link
});

<强> CSS

.navigation ul li a {
    background: transparent;
}

.navigation ul li a.active {
    background-color: #ffffff;
}

如何使用PHP构建具有动态突出显示功能的网站菜单？

4 个答案:

仅限PHP