活动菜单突出显示 CSS答案

【问题标题】：Active Menu Highlight CSS活动菜单突出显示 CSS
【发布时间】：2012-05-18 04:38:21
【问题描述】：

我想突出显示您点击的当前菜单。我正在使用 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; }

【问题讨论】：

标签： javascript html jquery css

【解决方案1】：

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

<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 链接将具有默认样式，表明它是当前页面。

【讨论】：

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

【解决方案2】：

回答：“当前”链接需要 CSS，这里是 tut。

Description of jQuery menu nav

示例：One of meny solution

它对我有用

【讨论】：

仅链接的答案在 SO 上不被视为有价值。请在此处提供解决方案。

【解决方案3】：

简单的添加方式

<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');
});

});

【讨论】：

【解决方案4】：

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

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

a.activePage{ color: green; border-bottom: solid; border-width: 3px;}
导航栏会是这样的：
- 主页
- 联系我们
- 关于我们

注意：如果您已经使用一个类为所有导航栏元素设置样式，您可以使用 white-space级联我们创建的特殊情况类> 在 html 标记中的泛型类之后。

示例： 在这里，我已经从我创建的名为 '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>

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

【讨论】：

【解决方案5】：

也许这是非常非常糟糕的方式，只适合懒惰的人但我决定说出来。

我也使用过 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;
}
?>

和在菜单中，您在 menu1 的类中添加 <?php if($a==1){echo "active";} ?> 并为 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代码是为了什么

【讨论】：

【解决方案6】：

首先，给你的所有链接一个唯一的 id 并创建一个名为 active 的 css 类：

<ul>
    <li><a id="link1" href="#/...">link 1</a></li>
    <li><a id="link2" href="#/...">link 2</a></li>
</ul>

CSS：

.active {
    font-weight: bold;
}

jQuery 版本：

function setActiveLink(setActive){
    if ($("a").hasClass('active'))
        $("a").removeClass('active');
    if (setActive)
        $("#"+setActive).addClass('active');
}

$(function() {
    $("a").click(function() {
        setActiveLink(this.id);
    });
});

原版 javascript 版本：

为了防止选择太多带有document.querySelectorAll 的链接，请给父元素一个名为menuLinks 的id。在链接上添加一个 onClick 处理程序。

<ul id="menuLinks">
    <li><a id="link1" href="#/..." onClick="setActiveLink(this.id);">link 1</a></li>
    <li><a id="link2" href="#/..." onClick="setActiveLink(this.id);">link 2</a></li>
</ul>

代码：

function setActiveLink(setActive){
    var links = document.querySelectorAll("#menuLinks a");
    Array.prototype.map.call(links, function(e) {
        e.className = "";
        if (e.id == setActive)
            e.className = "active";
    })
}

【讨论】：

【解决方案7】：

您应该引用当前元素，而不是所有与您的选择器匹配的元素。

$("#mainMenu td").click(function() {
$(this).css('background-color', '#EDEDED');

});

我还建议您使用 CSS 类而不是这样设置 CSS 属性。

应该是这样的；

$("#mainMenu td").click(function() {
$(this).addClass('selected');

});

一起;

#mainMenu td.selected {

背景颜色：#EDEDED； }

【讨论】：

【解决方案8】：

试试这个（复制粘贴）：

Test.html:-

<html>
 <link rel="stylesheet" type="text/css" href="style.css">
 <a class="fruit" href="#">Home</a></span>
 <a class="fruit"  href="#">About</a></span>
 <a class="fruit"  href="#">Contact</a></span>
</html>

style.css:-

a:link{
 color:blue;
}

a:visited{
 color:purple;
}

a:hover{
 color:orange;
}
a:focus{
color:green;
}

a:active{
 color:red;
}

a:active{
 color:yellow;
}

【讨论】：

【解决方案9】：

简单的 2 行监听器的另一种变体

$( ".menu_button" ).click(function() {

    $( ".menu_button" ).removeClass('menu_button_highlight');
    $(this).addClass('menu_button_highlight');
});

=====

    <a class='menu_button' href='#admin'>Admin</a>
    <br/>

    <a class='menu_button' href='#user_manager'>User Manager</a>
    <br/>

    <a class='menu_button' href='#invite_codes'>Invite Codes</a>

====

.menu_button {

    padding: 0 5px;
}

.menu_button_highlight {

    background: #ffe94c;
}

【讨论】：

【解决方案10】：

假设我们有一个这样的菜单：

<div class="menu">
  <a href="link1.html">Link 1</a>
  <a href="link2.html">Link 2</a>
  <a href="link3.html">Link 3</a>
  <a href="link4.html">Link 4</a>
</div>

让我们当前的网址为https://demosite.com/link1.html

通过以下函数，我们可以在我们的 url 中添加菜单的 href 所在的活动类。

let currentURL = window.location.href;

document.querySelectorAll(".menu a").forEach(p => {
  if(currentURL.indexOf(p.getAttribute("href")) !== -1){
    p.classList.add("active");
  }
})

【讨论】：

【解决方案11】：

按照@Sampson 的回答，我以这种方式接近它-

HTML：

我在每个页面中有一个div 和content 类，其中包含该页面的内容。页眉和页脚是分开的。
我用content 为每个页面添加了一个独特的类。例如，如果我正在创建一个联系我们页面，我会将页面内容放入<section class="content contact-us"></section>。
这样，我可以更轻松地在单个 style.css 中编写特定于页面的 CSS。

<body>
    <header>
        <div class="nav-menu">
            <ul class="parent-nav">
                <li><a href="#">Home</a></li>
                <li><a href="#">Contact us</a></li>
                ...
            </ul>
        </div>
    </header>

    <section class="content contact-us">
        Content for contact us page goes here
    </section>

    <footer> ... </footer>

</body>

CSS：

我已经定义了一个 active 类，它包含活动菜单的样式。

.active {
    color: red;
    text-decoration: none;
}

<body>
    <header>
        <div class="nav-menu">
            <ul class="parent-nav">
                <li><a href="#">Home</a></li>
                <li><a href="#">Contact us</a></li>
                ...
            </ul>
        </div>
    </header>

    <section class="content contact-us">
        Content for contact us page goes here
    </section>

    <footer> ... </footer>

</body>

JavaScript：

现在在 JavaScript 中，我的目标是将菜单链接文本与 HTML 中定义的唯一类名进行比较。我正在使用 jQuery。
首先，我获取了所有菜单文本，并执行了一些字符串函数以使文本小写并用连字符替换空格，使其与类名匹配。
现在，如果 content 类与菜单文本具有相同的类（小写且不带空格），请将 active 类添加到菜单项。

var $allMenu = $('.nav-menu > .parent-nav > li > a');
var $currentContent = $('.content');
$allMenu.each(function() {
  $singleMenuTitle = $(this).text().replace(/\s+/g, '-').toLowerCase();
  if ($currentContent.hasClass($singleMenuTitle)) {
    $(this).addClass('active');
  }
});

.active {
  color: red;
  text-decoration: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>
  <header>
    <div class="nav-menu">
      <ul class="parent-nav">
        <li><a href="#">Home</a></li>
        <li><a href="#">Contact us</a></li>
        ...
      </ul>
    </div>
  </header>

  <section class="content contact-us">
    Content for contact us page goes here
  </section>

  <footer> ... </footer>

</body>

我为什么接近这个？

@Sampson 的回答对我来说效果很好，但我注意到每次我想添加新页面时都必须添加新代码。
同样在我的项目中，body 标记位于 header.php 文件中，这意味着我无法为每个页面编写唯一的类名。

【讨论】：