Mam listę linków, które łączą się do sekcji na stronie za pomocą znaczników kotwicznych. Próbuję początkowo wcisnąć bieżącą nazwę klasy, gdy użytkownik ładuje stronę i dodać klasę "aktywnej" do elementu listy. Tak więc na przykład, jeśli użytkownik trafi do www.mydomain.com/#about-sekcja, nawigacja usunie istniejącą klasę "aktywną", a następnie dodać klasę do bieżącego łącza.

 <nav id="primary">
    <ul>
      <li class="active"><a href="#intro-section">Home</a></li>
      <li><a href="#work-section">Work</a></li>
      <li><a href="#about-section">About</a></li>
      <li><a href="#contact-section">Contact</a></li>
    </ul>
  </nav>

Jak chodzę na zmianę klas w zależności od którego sekcja jest widoczna za pomocą jQuery?

1
user906080 4 listopad 2011, 22:31

3 odpowiedzi

Najlepsza odpowiedź

Cóż, po prostu wiążę "kliknij" obsługi na znacznikach <a>.

$('nav').delegate('a', 'click', function() {
  $(this).closest('ul').find('li').removeClass('active');
  $(this).closest('li').addClass('active');
});

Jeśli twoja konstrukcja NAV jest głębsza lub bardziej skomplikowana lub cokolwiek innego, musisz użyć bardziej szczegółowych selektorów.

edytuj - Jeśli chcesz to nastąpić na obciążeniu strony, musisz coś zrobić w "gotowej" obsługi:

$(function() {
  $('nav a[href="' + window.location.hash + '"]').closest('li').addClass('active');
});

edytowane - Powyższy kod pierwotnie dodano "aktywny" do <a> zamiast jego rodzica <li> - dzięki @sctorsor do korekty.

2
Pointy 5 listopad 2011, 09:23

Jeśli poprawię cię poprawnie, otrzymasz adres URL: var URL = www.mydomain.com/#about-section Możesz uzyskać tag kotwicy według:

 var anc =  URL.split('#')[1]; // 'about-section'

Następnie możesz uzyskać link z HREF:

var aLink = $('a[href='+anc +']');

Wreszcie usuń wszystkie aktywną klasę, otrzymaj li i dodaj aktywną klasę

$('li','#primary').removeClass('active');
    aLink.closest('li').addClass('active');
1
Frenchi In LA 4 listopad 2011, 18:48

Myślę, że coś takiego zrobiłoby to sztuczka. Nie testowany.

var hash = window.location.hash;
if (hash != '') {
    //remove active class
    $('.active').removeClass('active');
    //attach active class to anchor
    $('a [name="' + hash + '"]').addClass('active');  //link anchors
    $('* [id="' + hash + '"]).addClass('active');     //id anchors
}
0
mrtsherman 4 listopad 2011, 18:41