Chciałbym osiągnąć w menu taką funkcjonalność że po wejściu na konkretną podstronę podświetlony (zmieniony) będzie odpowiadający mu link, a domyślnie po wejściu na stronę będzie podświetlony link np: strona główna (home). Taką funkcjonalność można zaobserwować na stronie
http://www.cstore.pl/
Wiem że można to osiągnąć np w ten sposób
Kod
$(function() {
$('a.link').click(function() {
$('a.link').removeClass('active');
$(this).addClass('active');
});
});
$('a.link').click(function() {
$('a.link').removeClass('active');
$(this).addClass('active');
});
});
ale zależy mi na tym aby ta funkcjonalność była powiązana z adresem url
Ten za to skrypt
Kod
$(function(){
$("a").filter(function() {
return this.href === document.location.href;
}).addClass("active");
});
$("a").filter(function() {
return this.href === document.location.href;
}).addClass("active");
});
działa idealnie - po kliknięciu w odpowiedni link jego tło faktycznie się zmienia.
plik html-a wygląda tak
Kod
<ul id="nav">
<li><a href="index.php?p=home" class="link active" target="_self">Link 1</a></li>
<li><a href="index.php?p=about" class="link" target="_self">Link 2</a></li>
<li><a href="index.php?p=blog" class="link">Link 3</a></li>
<li><a href="index.php?p=contact" class="link">Link 4</a></li>
</ul>
<li><a href="index.php?p=home" class="link active" target="_self">Link 1</a></li>
<li><a href="index.php?p=about" class="link" target="_self">Link 2</a></li>
<li><a href="index.php?p=blog" class="link">Link 3</a></li>
<li><a href="index.php?p=contact" class="link">Link 4</a></li>
</ul>
Problem w tym żeby po kliknięciu w jakiś link usunięte zostało podświetlenie linku home. Próbowałem to zmienić na różne sposoby ale efekt był niezadowalający. Będę wdzięczny jeśli ktoś będzie w stanie zmienić ten skrypt jquery pod tym kątem