Знам, че на този въпрос е даден отговорпреди, но не мога да разбера как да го направя с моя код поради количеството на div и количеството класове. Как мога да накарам активната страница да има различен цвят на фона. Използвам отзивчива рамка за зареждане на туитър (2), така че трябва да опънете прозореца за гледане навън, за да видите всички раздели в горната част.
JsFiddle е: http://jsfiddle.net/2bhnQ/1/
Моят код е, както следва:
<div class="navbar navbar-inverse navbar-static-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse" href="#">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="index.php">HOME</a>
<div class="nav-collapse">
<ul class="nav">
<li class="dropdown">
<a href="people.php" class="dropdown-toggle" data-toggle="dropdown">People<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="people.php">All</a></li>
<li><a href="people.php#staff">Staff</a></li>
<li><a href="people.php#grad">Graduate Students</a></li>
<li><a href="people.php#undergrad">Undergraduate Students</a></li>
<li><a href="people.php#visitors">Visitors and Affiliates</a></li>
<li><a href="people.php#interns">Interns</a></li>
<li><a href="people.php#alumni">InfoLab Alumni</a></li>
</ul>
</li>
<li class="dropdown">
<a href="publications.php" class="dropdown-toggle" data-toggle="dropdown">Publications<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="publications.php">All</a></li>
<li><a href="publications.php#start-and-omnibase">START and Omnibase</a></li>
<li><a href="publications.php#question-answering">Question Answering</a></li>
<li><a href="publications.php#semantic">The Semantic Web</a></li>
<li><a href="publications.php#other">Other Publications</a></li></ul>
</li>
<li>
<a href="start-system.php">How START works</a></li>
</ul>
</div>
</div>
</div>
Опитах да направя нещо подобно, но товане работи. (Това е само отговор от друг stackoverflow, така че предположих, че би било полезно, но мога да използвам $ (location) .attr ("href") или всяка друга опция, ако помага.)
$(document).ready(function(){
alert(window.location.pathname);
$(".navbar navbar-inverse navbar-static-top .navbar-inner .container .nav-collapse .nav li a").each(function(){
if($(this).attr("href")==window.location.pathname)
$(this).addClass("active");
}) })
Като начинаещ програмист през първия ми месец на работа, всяка помощ е високо оценена. Благодаря.
Отговори:
1 за отговор № 1$ (". navbar navbar-inverse navbar-static-top.navbar-Internal .container .nav-колапс .nav li a ") това няма да се насочи към това, което търсите. Ако искате да бъдете толкова конкретни, колкото сте, имате нужда: $ (". navbar.navbar-inverse.navbar-static-top .navbar-inner .container .nav-колапс .nav li a")
Пробелите в селектора предполагат йерархия, акоискате един елемент с няколко класа, не оставяте място между класовете. .navbar.navbar-inverse.navbar-static-top е div с всичките 3 класа.
Най-вероятно бихте се насочили безопасно към .navbar вместо .navbar.navbar-inverse.navbar-static-top
1 за отговор № 2
Няма .navbar-inverse вложени в a .navbar, така че вашият селектор не намира нищо.
Трудно ми е да тествам без пълната ви настройка, но опитайте това:
$(document).ready(function(){
alert(window.location.pathname);
$(".navbar .navbar-inner .container .nav-collapse .nav li a").each(function(){
if($(this).attr("href")==window.location.pathname)
$(this).addClass("active");
}) })
1 за отговор № 3
Ако искате да го направите с jquery, опитайте да използвате href селектор. Излиза така:
$(document).ready(function(){
$("a[href="publications.php#start-and-omnibase"]").css("background","red");
});
Винаги можете да добавите някои селектори преди "a" таг, така че да се отнася само за конкретен елемент или област. Например:
$("#menu a[href="publications.php#start-and-omnibase"]").css("background","red");
Ако работи като чар, само това, което трябва да направите, е да зададете тази динамична href пътека.
$(document).ready(function(){
$("a[href=""+url+""]").addClass("active");
});
Разбира се, трябва да анализирате тази променлива на url, за да коригирате стойността. Надявам се да помогне :)
Също така сега видях, че попитахте какво означаваправене на активен елемент от страна на сървъра. Това означава, че добавяте клас "активен" върху елемент, който в момента е активен, докато генерирате това меню от страна на сървъра (с PHP или каквото и да е друго) и го изпращате до клиентска страна с всички зададени класове. Ако менюто не е статично и винаги се генерира от някакъв език на сървъра в зависимост от елементите на менюто, които са събрани от DB или по друг начин, докато генерирате елементи от менюто, можете също да проверите дали текущото местоположение на потребителя е същото като текущото меню item href, и ако е, можете лесно да зададете класа на този елемент на активен.