活动菜单突出显示 CSS

IT技术 javascript html jquery css
2021-03-07 17:29:05

我想突出显示您单击的当前菜单。我正在使用 CSS,但它现在正在工作。

这是我的 css 代码:

#sub-header ul li:hover{ background-color: #000;}
#sub-header ul li:hover a{ color: #fff; }
#sub-header ul li.active{ background-color: #000; }
#sub-header ul li.active a{ color: #fff; }

这是我的 html:

<div id="sub-header">
    <ul>
        <li> <a href="index.php">Home</a> </li>
        <li> <a href="contact.php">Contact Us</a> </li>
        <li> <a href="about.php">About Us</a> </li>
    </ul>
</div>

这就是我在悬停和菜单处于活动状态时喜欢的

这就是我在悬停和菜单处于活动状态时喜欢的

悬停没问题,问题是当我点击菜单后,黑地不显示


@Jonathan,我已经解决了它,它比你给出的更简单。

这是我的回答:

$(function(){
    // this will get the full URL at the address bar
    var url = window.location.href; 

    // passes on every "a" tag 
    $("#sub-header a").each(function() {
            // checks if its the same on the address bar
        if(url == (this.href)) { 
            $(this).closest("li").addClass("active");
        }
    });
});

然后在我的 css 文件上:

.active { background-color: #000; }
/* to override the existing css for "a" tag */
#sub-header .active a{ color: #fff; }
6个回答

在每个页面的正文中添加一个类:

<body class="home">

或者,如果您在联系页面上:

<body class="contact">

然后在创建样式时考虑到这一点:

#sub-header ul li:hover,
body.home li.home,
body.contact li.contact { background-color: #000;}

#sub-header ul li:hover a,
body.home li.home a,
body.contact li.contact a { color: #fff; }

最后,将类名应用于您的列表项:

<ul>
  <li class="home"><a href="index.php">Home</a></li>
  <li class="contact"><a href="contact.php">Contact Us</a></li>
  <li class="about"><a href="about.php">About Us</a></li>
</ul>

这一点,无论何时您在body.home页面上,您的li.home a链接都会具有默认样式,表明它是当前页面。

对不起,现在它正在工作......但是还有另一个为什么要实现它?通过不添加类或 id。
2021-04-26 17:29:05
@justin 如果您要离开该页面,则不。我的意思是,您可以使用一些巧妙的 JavaScript 来嗅探当前 URL 并找到相应的<a>元素,并为其添加一个特殊的类。
2021-05-01 17:29:05
你有使用 javascript 的例子吗?
2021-05-02 17:29:05
@justin 请记住,jQuery 解决方案仅在用户启用 JavaScript 时才有效。
2021-05-05 17:29:05
@justin 检查您的选择器。这是一个相当直接的实施方案。body.foo li.foo { background: bar }.
2021-05-13 17:29:05

答:这里的“当前”链接需要 CSS。

jQuery 菜单导航说明

示例:许多解决方案之一

它对我有用

仅链接的答案在 SO 上不被认为是有value的。请在此处提供解决方案
2021-05-21 17:29:05

添加简单的方式

<div id='cssmenu'>
<ul>
<li class=''><a href='1.html'><span>1</span></a></li>
<li class=''><a href='2.html'><span>2</span></a></li>
<li class='' style="float:right;"><a href='3.html'><span>3</span></a></li>
</ul>
</div>

$("document").ready(function(){
$(function() {
$('.cssmenu a[href="' + location.pathname.split("/")[location.pathname.split("/").length-1] + '"]').parent().addClass('active');
});

});

由于这个问题的给定标签是CSS,我将提供我完成它的方式。

  1. 在 .css 文件中创建一个类。

    a.activePage{ color: green; border-bottom: solid; border-width: 3px;}

  2. 导航栏将类似于:

    • 联系我们
    • 关于我们

注意:如果您已经使用一个类为所有 Nav-Bar 元素设置了样式,您可以在 html-tag 中的泛型类之后使用空格级联我们创建的特殊情况类

示例:在这里,我已经从我为所有 list-items 创建的名为'navList'的类中导入了我的样式但是特殊情况的样式属性是“activePage”一部分

.CSS 文件:

a.navList{text-decoration: none; color: gray;}
a.activePage{ color: green; border-bottom: solid; border-width: 3px;}

.HTML 文件:

<div id="sub-header">
    <ul>
        <li> <a href="index.php" class= "navList activePage" >Home</a> </li>
        <li> <a href="contact.php" class= "navList">Contact Us</a> </li>
        <li> <a href="about.php" class= "navList">About Us</a> </li>
    </ul>
</div>

看看我是如何将一个类名级联到另一个之后的。

也许这是非常非常糟糕的方式,只是为了懒惰的人,但我决定说出来。

我也使用了 PHP 和 bootstrap 以及 fontawsome

简单来说,我有 2 个页面:1.index 和 2.create-user

将此代码放在您的代码上方

<?php
$name=basename($_SERVER["REQUEST_URI"]);
$name=str_replace(".php","",$name);
switch ($name) {
    case "create-user":
        $a = 2;
        break;
    case "index":
        $a = 1;
        break;
    default:
        $a=1;
}
?>

并在菜单<?php if($a==1){echo "active";} ?>中为 menu1添加类,为 menu2 添加<?php if($a==2){echo "active";} ?>

<ul id="menu" class="navbar-nav  flex-column text-right mt-3 p-1">
                        <li class="nav-item mb-2">
                            <a href="index.php" class="nav-link text-white customlihamid <?php if($a==1){echo "active";} ?>"><i
                                        class="fas fa-home fa-lg text-light ml-3"></i>dashbord</a>
                        </li>
                        <li class="nav-item mb-2">
                            <a href="#" href="javascript:" data-parent="#menu" data-toggle="collapse"
                               class="accordion-toggle nav-link text-white customlihamid <?php if($a==2){echo "active";} ?>" data-target="#tickets">
                                <i class="fas fa-user fa-lg text-light ml-3"></i>manage users
                                <span class="float-left"><i class="fas fa-angle-down"></i></span>
                            </a>

                            <ul class="collapse list-unstyled mt-2 mr-1 pr-2" id="tickets">
                                <li class="nav-item mb-2">
                                    <a href="create-user.php" class="nav-link text-white customlihamid"><i class="fas fa-user-plus fa-lg text-light ml-3"></i>add user</a>
                                </li>

                                <li class="nav-item mb-2">
                                    <a href="#" class="nav-link text-white customlihamid"><i class="fas fa-user-times fa-lg text-light ml-3"></i>delete user</a>
                                </li>

                            </ul>
                        </li>

                    </ul>

并添加 css

.customlihamid {
    transition: all .4s;
}

.customlihamid:hover {
    background-color: #8a8a8a;
    border-radius: 5px;
    color: #00cc99;
}
.nav-item > .nav-link.active  {
    background-color: #00cc99;
    border-radius: 7px;
    box-shadow: 5px 7px 10px #111;
    transition: all .3s;
}
.nav-item > .nav-link.active:hover  {
    background-color: #8eccc1;
    border-radius: 7px;
    box-shadow: 5px 7px 20px #111;
    transform: translateY(-1px);
}

并在js中添加

$(document).ready(function () {
   $('.navbar-nav .nav-link').click(function(){
      $('.navbar-nav .nav-link').removeClass('active');
      $(this).addClass('active');
   })
});

首先在没有js代码的情况下检查你的工作以了解js代码是什么