Active link turn different color

Я пытаюсь связать эти три скрипта так, что активная ссылка превращается в другой цвет фиолетового цвета. jquery.js содержит загруженную библиотеку jquery. Я не знаю, почему он работает не так, как ожидалось. Кто угодно?Active link turn different color

<link href="site.css" rel="stylesheet"> 
<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript" src="color.js"></script> 

</head> 

<body> 


<div class="nav-container" > 
<ul class="navigation-menu" > 
    <li><a href='start.php'>Home</a></li> 
    <li><a href='pay.php'>C2B Payments</a> </li> 
    <li><a href='sms.php'>C2B SMS</a></li> 
    <li><a href='#'>B2C Payments</a> 
    <ul> 
     <li><a href="getbtc.php"> B2C Payments</a></li> 
     <li><a href="payment.php"> Make Payments</a></li> 
    </ul> 
    </li> 

    <li><a href='bsms.php'>B2C SMS</a></li> 
    <li><a href='index.php'>Log Out</a></li> 
</ul>

//JS color.js 
$(document).ready(function(){ 
    $('ul li a').click(function(){ 
    $('li a').removeClass("active"); 
    $(this).addClass("active"); 
}); 
}); 

//css site.css 
.navigation-menu li a.active { 
    background-color: purple; 
    color:#fff; 
    }

источник

2016-06-27 Bob

его работающий уже ваш код, а вы ожидаете, что активная ссылка изменит цвет фона? –

Что ожидается? – Rayon

Проблема заключается в том, что нажатие на ссылку заставляет браузер загружать указанную страницу, заменяя текущую страницу, на которую вы применили изменение класса. (Ваш код будет работать, если ссылки не загружают новую страницу: https://jsfiddle.net/wecttb36/.) Вы можете добавить код в готовый обработчик, чтобы извлечь имя текущей страницы из 'location.href' а затем выберите соответствующий якорь для применения класса. – nnnnnn

Попробуйте этот код

HTML

<ul class="navigation-menu" > 
    <li class="active"><a href='#'>Home</a></li> 
    <li><a href='#'>C2B Payments</a> </li> 
    <li><a href='#'>C2B SMS</a></li> 
    <li><a href='#'>B2C Payments</a> 
    <ul> 
     <li><a href="#"> B2C Payments</a></li> 
     <li><a href="#"> Make Payments</a></li> 
    </ul> 
    </li> 

    <li><a href='#'>B2C SMS</a></li> 
    <li><a href='#'>Log Out</a></li> 
</ul>

CSS

.active{ 
    background-color:purple; 
}

Jquery

$(document).ready(function(){ 

$('li > a').click(function() { 
    $('li').removeClass('active').css("background-color", ""); 

    var $paren = $(this).parent(); 
     if (!$paren.hasClass('active')) { 
      $paren.addClass('active'); 
     } 
}); 
});

источник

2016-06-27 03:39:24 ihemant360

(Предположим, вы исправили ошибки синтаксиса). Почему это работает, если добавить класс 'active' с теми же свойствами цвета? – nnnnnn

Пробовал, но не работал. – Bob

Это не сработает, подумайте, потому что, когда ссылки загружаются – Bob

При нажатии на ссылку ваш обработчик щелчка будет работать, чтобы изменить класс (и, следовательно, цвет) нажатого элемента на текущей странице, но нормальная страница произойдет навигация, и указанная страница загрузится, перезаписав изменение, которое было применено к предыдущей странице.

Вместо использования обработчика щелчка вы можете запустить код при загрузке страницы, чтобы извлечь имя страницы из location.href, а затем использовать его как селектор, чтобы установить класс на якоре, соответствующем текущей странице.

То есть, если бы вы могли как-то сказать, что текущая страница bsms.php, то тогда вы можете сказать $("a['href=bsms.php']).addClass("active");. Итак, как бы вы это сделали? Вот один из способов:

$(document).ready(function() { 
    var currentPage = location.href.match(/\/(\w+\.php)/); 
    if (currentPage) { 
    $("a[href='" + currentPage[1] + "']").addClass("active"); 
    } 
});

Это использует регулярное выражение, которое предполагает структуру ваших URL, некоторая вариация на следующем:

www.somedomainname.com/optional/folders/pagename.php?optionalargs=something

и просто получает pagename.php части.

Регулярное выражение соответствует следующим образом:

\/   - a forward slash (which has to be escaped in the regex) 
(   - beginning of a sub match 
\w+  - one or more "word" characters 
\.   - a literal . 
php  - the literal characters php 
)   - end of the sub match

Переменная currentPage будет null, если не было матча, в противном случае он будет массив, в котором элемент с индексом 1 является имя страницы.

источник

2016-06-27 04:10:29 nnnnnn

Вы пробовали просто это?

.navigation-menu li a:active { 
    background-color: purple; 
    color:#fff; 
}

Вместо того чтобы пытаться модифицировать классы CSS с помощью JQuery, почему бы просто не сделать все это с помощью CSS.

CSS активное состояние определяется как

:active

Не так

.active

(Только в случае, если вы пытаетесь предназначаться состояние и не намеренно делать это с помощью классов)

Редактировать :

$(".navigation.menu").click(function(){ 
    $(".navigation.menu").css("color","#fff"); 
    $this.css("color","#f0f"); 
});

Это может сработать для вас, извините, если это изменение не совсем корректно, поскольку я нахожусь на своем телефоне.

источник

2016-06-27 04:35:41 Aidan

Здравствуйте @Aidan Я хочу, когда ссылка активна, чтобы она оставалась в этом фиолетовом цвете до тех пор, пока не будет нажата другая кнопка. – Bob

Попробуйте мое редактирование – Aidan

Видимо, не работает. Только изменения при нажатии не активны – Bob

Active link turn different color

ответ

Смежные вопросы