Активное меню Highlight CSS

Я хочу выделить текущее меню, которое вы нажали. Я использую 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>

Это то, что мне нравится, когда я нахожусь, и если меню активно

This is what I like when I hover and if the menu is active

Наведение в порядке, проблема в том, что после того, как я щелкнул по меню, черная земля не отображается

@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; }

Ответы

Ответ 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 будет иметь стиль по умолчанию, указывающий, что это текущая страница.

Ответ 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;}

  • Nav-bar будет выглядеть следующим образом:

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

ПРИМЕЧАНИЕ. Если вы уже устанавливаете стиль для всех элементов Nav-Bar с помощью класса, вы можете каскадировать класс специального случая, который мы создали, с 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

Сначала дайте всем своим ссылкам уникальный идентификатор и сделайте класс 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. Добавьте обработчик 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";
    })
}

Ответ 6

Вы должны обратиться к текущему элементу, а не ко всем элементам, соответствующим вашему селектору.

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

});

Я также рекомендую использовать классы CSS вместо того, чтобы устанавливать свойства CSS таким образом.

Это будет что-то вроде:

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

});

вместе с;

#mainMenu td.selected {

background-color: #EDEDED; }

Ответ 7

Попробуйте (Скопируйте и вставьте):

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

Ответ 8

Еще один вариант с простым 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;
}

Ответ 9

Может быть, это очень, очень плохой способ и просто для ленивого человека, но я решил это сказать.

Я тоже использовал 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 для чего