0
Итак, я смотрел на этот плагин jquery, который выделяет текущий пункт меню, отображаемый на текущей странице. В настоящее время я хочу, чтобы границы меню и текст меняли цвет. Метод CSS, к которому я пытаюсь достичь этого. Выбрано. Возможно, я, наверное, очень глуп, но я не могу заставить его работать. Любая помощь могла бы быть полезна. Мой JS указан в отдельной папке.Посещенная опция меню не подсвечивается
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
<script src="js/pageMenu.js" type="text/javascript" ></script>
<div class="container">
<header class="site-header">
<img id="logo" src="logo.png" alt="logo">
<nav id="nav"<a href="#"></a>
<ul id="site-nav">
<li><a href="index.php">Home</a>
</li>
<li><a href="#">Used Cars</a>
</li>
<li><a href="aboutus.php">About us</a>
</li>
<li><a href="#">Contact Us</a>
</li>
</ul>
</nav>
Вот JS
$(document).ready(function(){
$('#site-nav a').each(function(index) {
if(this.href.trim() == window.location)
$(this).addClass("selected");
});
});
наконец CSS (который я знаю, беспорядок)
#site-nav {
margin: 0px;
padding: 0px;
line-height: 1;
}
#site-nav li {
float: left;
list-style: none;
}
#site-nav li a:link, #site-nav li a:visited {
font-family: 'Pontano Sans', sans-serif;
font-size:14px;
font-weight: bold;
display: block;
padding: 12px 17px;
text-decoration: none;
border-radius: 0px 0px 8px 8px;
/* horizontal radius/vertical radius */
list-style: none;
border-style: outset;
border-width: 1px;
background: #FFFFFF;
background: rgba(226, 226, 226, 1);
background: -moz-linear-gradient(top, rgba(226, 226, 226, 1) 0%, rgba(219, 219, 219, 1) 3%, rgba(209, 209, 209, 1) 51%, rgba(254, 254, 254, 1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(226, 226, 226, 1)), color-stop(3%, rgba(219, 219, 219, 1)), color-stop(51%, rgba(209, 209, 209, 1)), color-stop(100%, rgba(254, 254, 254, 1)));
background: -webkit-linear-gradient(top, rgba(226, 226, 226, 1) 0%, rgba(219, 219, 219, 1) 3%, rgba(209, 209, 209, 1) 51%, rgba(254, 254, 254, 1) 100%);
background: -o-linear-gradient(top, rgba(226, 226, 226, 1) 0%, rgba(219, 219, 219, 1) 3%, rgba(209, 209, 209, 1) 51%, rgba(254, 254, 254, 1) 100%);
background: -ms-linear-gradient(top, rgba(226, 226, 226, 1) 0%, rgba(219, 219, 219, 1) 3%, rgba(209, 209, 209, 1) 51%, rgba(254, 254, 254, 1) 100%);
background: linear-gradient(to bottom, rgba(226, 226, 226, 1) 0%, rgba(219, 219, 219, 1) 3%, rgba(209, 209, 209, 1) 51%, rgba(254, 254, 254, 1) 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#e2e2e2', endColorstr='#fefefe', GradientType=0);
}
#site-nav a:focus, #site-nav a:hover {
color: #DC2F35;
background-color: #FFFFFF;
}
.selected {
color: #DC2F35;
border-color: #DC2F35;
}
Можете ли вы разместить это в jsfiddle? Что на самом деле происходит вместо предполагаемого поведения? –
Кажется, [отлично работает в jsFiddle] (http://jsfiddle.net/djv3ozk9/1/) (уведомление я изменил адрес ссылки одного из них, чтобы он был выбран). Попробуйте открыть консоль (ctrl + alt + j на chrome), вы получаете какие-либо ошибки? Возможно, вы не импортировали файлы javascript правильно ... – yuvi
он отлично работает, когда я использую #, поскольку я не привязываюсь к новой странице. Как только я перехожу от index.php к aboutus.php, о нас в навигационной панели, похоже, не забирает форматирование из .selected. Он работает на index.php, но это – Juakali92