Почему я не могу выделить ссылку, в которой я сейчас?

Question

У меня в основном есть навигационная панель с несколькими ссылками. Я хочу уметь выделить соответствующую ссылку в соответствии со страницей, на которой я нахожусь.

По некоторым причинам мой код, похоже, не работает.

вот HTML файл:

<div class='sidebar'> 
       <div class='title'> 
        Sonder 
       </div> 
       <ul class='nav'> 
        <li><a class='active' href='members.php?view = <?=$user?>'>Home</a></li> 
        <li><a href='members.php' >Members</a></li> 
        <li><a href='friends.php' >Friends</a></li> 
        <li><a href='messages.php'>Messages</a></li> 
        <li><a href='profile.php'>Edit Profile</a></li> 
        <li><a href='logout.php'>Logout</a></li> 
       </ul> 
      </div> 

вот часть CSS:

.nav li a { 
    position: relative; 
    display: block; 
    padding: 15px 15px 15px 50px; 
    font-size: 12px; 
    color: #eee; 
    border-bottom: 1px solid #222; 
    cursor: pointer; 
} 

.nav li a:before { 
    font: 14px fontawesome; 
    position: absolute; 
    top: 14px; 
    left: 20px; 
} 
.nav li:nth-child(1) a:before { 
    content: '\f015'; 
} 

.nav li:nth-child(2) a:before { 
    content: '\f0c2'; 
} 

.nav li:nth-child(3) a:before { 
    content: '\f183'; 
    left: 23px; 
} 

.nav li:nth-child(4) a:before { 
    content: '\f003'; 
} 

.nav li:nth-child(5) a:before { 
    content: '\f013'; 
} 

.nav li:nth-child(6) a:before { 
    content: '\f023'; 
    left: 22px; 
} 

.nav li a:hover { 
    background: #444; 
} 

.nav li a.active { 
    box-shadow: inset 5px 0 0 #5b5, inset 6px 0 0 #222; 
    background: #444; 
} 

вот Javascript код:

$(document).ready(function() { 
    setNavigation(); 

}); 

function setNavigation() { 
    var path = window.location.pathname; 
    path = path.replace(/\/$/, ""); 
    path = decodeURIComponent(path); 

    $(".nav a").each(function() { 
     var href = $(this).attr('href'); 
     if (path.substring(0, href.length) === href) { 
      $(this).closest('li').addClass('active'); 
     } 
    }); 
} 

Answer 1

Ваши правила CSS выполняются на заказ, ваш класс active переопределяет зависание.

Изменить положение и она должна работать

.nav li a.active { 
    box-shadow: inset 5px 0 0 #5b5, inset 6px 0 0 #222; 
    background: #444; 
} 
.nav li a:hover { 
    background: #444; 
} 

Или добавить определенный active:hover правилу

Answer 2

правило Изменение CSS для

.nav li.active a{} 

Answer 3

Есть несколько проблем в вашем коде.

1. Переменная path JS оказывает предшествующий прямой слэш, т.е. /members.php или /friends.php. По этой причине часть path.substring(0, href.length) возвращается как /members.ph, которая не соответствует ни одному hrefs на странице.

2. Активный класс, который выделяет меню, находится в элементе элемента привязки, а не в элементе тега li в соответствии с CSS, который вы написали, но с JS вы пытались добавить активный класс в li.

Вот полный фрагмент кода, который работал:

HTML:

<div class='sidebar'> 
     <div class='title'>Sonder</div> 
     <ul class='nav'> 
      <li><a class='active' href='members.php?view=<?=!empty($user)?:0?>'>Home</a></li> 
      <li><a href='members.php' >Members</a></li> 
      <li><a href='friends.php' >Friends</a></li> 
      <li><a href='messages.php'>Messages</a></li> 
      <li><a href='profile.php'>Edit Profile</a></li> 
      <li><a href='logout.php'>Logout</a></li> 
     </ul> 
    </div> 

CSS:

.nav li a { 
     position: relative; 
     display: block; 
     padding: 15px 15px 15px 50px; 
     font-size: 12px; 
     color: #eee; 
     border-bottom: 1px solid #222; 
     cursor: pointer; 
    } 
    .nav li a:before { 
     font: 14px fontawesome; 
     position: absolute; 
     top: 14px; 
     left: 20px; 
    } 
    .nav li:nth-child(1) a:before { 
     content: '\f015'; 
    } 
    .nav li:nth-child(2) a:before { 
     content: '\f0c2'; 
    } 
    .nav li:nth-child(3) a:before { 
     content: '\f183'; 
     left: 23px; 
    } 
    .nav li:nth-child(4) a:before { 
     content: '\f003'; 
    } 
    .nav li:nth-child(5) a:before { 
     content: '\f013'; 
    } 
    .nav li:nth-child(6) a:before { 
     content: '\f023'; 
     left: 22px; 
    } 
    .nav li a:hover { 
     background: #444; 
    } 
    .nav li a.active { 
     box-shadow: inset 5px 0 0 #5b5, inset 6px 0 0 #222; 
     background: #444; 
    } 

Блок сценария:

<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      setNavigation(); 
     }); 

     function setNavigation() { 
      var path = window.location.pathname; 
      path = path.replace(/\/$/, ""); 
      path = decodeURIComponent(path); 

      $(".nav a").each(function() { 
       var href = $(this).attr('href'); 

       if (path.substring(1, path.length) === href) { 
        $(".nav a").removeClass('active'); 
        $(this).addClass('active'); 
        return; 
       } 
      }); 
     } 
    </script> 

Это должно работать должным образом.

Answer 4

я переехал код вокруг немного и сделал Jquery работу, не знаю, насколько хорошо он будет работать в сниппета так вот скрипку https://jsfiddle.net/link2twenty/wysh0j6q/

 

 
$('document').ready(function() { 
 
    setNavigation(); 
 
}); 
 

 
function setNavigation() { 
 
    var path = window.location.href; 
 
    path = (path.substring(path.lastIndexOf('/') + 1)); 
 

 
    $(".nav .menu").each(function() { 
 
    var href = $(this).attr('href'); 
 
    if (path === href) { 
 
     $(this).addClass('active'); 
 
    } 
 
    }) 
 
}

body { 
 
    margin: 0; 
 
} 
 

 
li { 
 
    list-style: none; 
 
} 
 

 
.nav li a { 
 
    position: relative; 
 
    display: block; 
 
    padding: 15px 15px 15px 50px; 
 
    font-size: 12px; 
 
    color: #eee; 
 
    background: #333; 
 
    border-bottom: 1px solid #222; 
 
    cursor: pointer; 
 
} 
 

 
.nav li a:before { 
 
    font: 14px fontawesome; 
 
    position: absolute; 
 
    top: 14px; 
 
    left: 20px; 
 
} 
 

 
.nav li:nth-child(1) a:before { 
 
    content: '\f015'; 
 
} 
 

 
.nav li:nth-child(2) a:before { 
 
    content: '\f0c2'; 
 
} 
 

 
.nav li:nth-child(3) a:before { 
 
    content: '\f183'; 
 
    left: 23px; 
 
} 
 

 
.nav li:nth-child(4) a:before { 
 
    content: '\f003'; 
 
} 
 

 
.nav li:nth-child(5) a:before { 
 
    content: '\f013'; 
 
} 
 

 
.nav li:nth-child(6) a:before { 
 
    content: '\f023'; 
 
    left: 22px; 
 
} 
 

 
.nav li a:hover { 
 
    background: #444; 
 
} 
 

 
.nav li a.active { 
 
    box-shadow: inset 5px 0 0 #5b5, inset 6px 0 0 #222; 
 
    background: #444; 
 
}

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> 
 
<script type='text/javascript' src='//code.jquery.com/jquery-2.1.4.js'></script> 
 
<div class='sidebar'> 
 
    <div class='title'> 
 
    Sonder 
 
    </div> 
 
    <div class='nav'> 
 
    <li><a class='menu' href='#'>Home</a></li> 
 
    <li><a class='menu' href='#'>Members</a></li> 
 
    <li><a class='menu' href='#'>Friends</a></li> 
 
    <li><a class='menu' href='#'>Messages</a></li> 
 
    <li><a class='menu' href='js'>Edit Profile</a></li> 
 
    <li><a class='menu' href='#'>Logout</a></li> 
 
    </div> 
 
</div>