Сделать стартовой

Каков стандартный способ сделать активную ссылку в навигационной панели Twitter Bootstrap? Понятно, что ссылка получает активный вид, получая «активный» класс. Например, активна ссылка « Home ниже. Когда я нажимаю любую ссылку в навигационной панели, следует использовать jQuery для удаления всех классов из элементов li а затем добавить active класс к ссылке, которую я id'd?

 <ul class="nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> </ul> 

EDIT : я включил

 <script type="text/javascript"> $('.nav li a').on('click', function() { alert('clicked'); $(this).parent().parent().find('.active').removeClass('active'); $(this).parent().addClass('active'); }); </script> 

после ссылок. Предупреждение появляется, когда я нажимаю ссылку, но «активный» класс не добавляется к ссылке.

Вот все мои навигационные HTML:

 <div class="navbar navbar-fixed-top"> <div class="navbar-inner"> <div class="container"> <a class="brand" href="#">AuctionBase</a> <div class="nav-collapse"> <ul class="nav"> <li><a href="home.php">Search</a></li> <li><a href="about.php">About</a></li> </ul> </div> </div> </div> </div> 

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

Сначала вам нужно определить, какой navlink должен быть установлен как активный, а затем добавить активный класс в <li> . Код будет выглядеть примерно так:

Протестировано респондентом :

HTML внутри php-файла

Вызвать встроенную php-функцию в пределах разметки <li> проходящей в запросе назначения ссылок uri

 <ul class="nav"> <li <?=echoActiveClassIfRequestMatches("home")?>> <a href="home.php">Search</a></li> <li <?=echoActiveClassIfRequestMatches("about")?>> <a href="about.php">About</a></li> </ul> 

Функция PHP

Для простой функции php необходимо сравнить переданный в запросе uri, и если он соответствует текущей странице, отображаемой активным классом вывода

 <?php function echoActiveClassIfRequestMatches($requestUri) { $current_file_name = basename($_SERVER['REQUEST_URI'], ".php"); if ($current_file_name == $requestUri) echo 'class="active"'; } ?> 

http://totalprogus.blogspot.sk/2013/12/bootstrap-add-active-class-to-li.html

Этот урок имеет большое и окончательное решение для этой «проблемы». Я имел дело с ним некоторое время назад и отлично работал для меня, настраиваемый также

 $(document).ready(function() { $('a[href="' + this.location.pathname + '"]').parent().addClass('active'); }); 

Если вы не хотите иметь дело с серверной стороной, и в случае, когда все hrefs просты, например «/page.php», вы можете позвонить

 $('.your-nav-container').find('a[href="' + location.pathname + '"]').parents('li').addClass('active'); 

после загрузки страницы.

Можешь попробовать:

 $('.nav li a').on('click', function() { $(this).parent().parent().find('.active').removeClass('active'); $(this).parent().addClass('active').css('font-weight', 'bold'); }); 

Было бы лучше указать ваш атрибут id , потому что у вас может быть более одного навигатора на странице с классом nav .

 $('#main-nav li a').on('click', function() { $(this).parent().parent().find('.active').removeClass('active'); $(this).parent().addClass('active').css('font-weight', 'bold'); }); 

В качестве альтернативы вместо использования .css('font-weight', 'bold') , вы можете просто поместить это в таблицу стилей:

 .active { font-weight: bold; } 

Крис Moutray ваш ответ очень помог мне в разработке моего программного обеспечения (я использую ZendFramework). Я написал этот помощник вида:

 <?php class Zend_View_Helper_ActiveOrNot { function activeOrNot ( $requestUri ) { $current_file_name = basename($_SERVER['REQUEST_URI'], ".php"); if ($current_file_name == $requestUri) echo 'class="active"'; } } 

В этом случае я называю этого помощника в представлении таким образом:

 <?php $this -> activeOrNot ( "public" ); 

Спасибо!!

Добавьте следующий скрипт в нижней части страницы:

 <script> $(document).ready(function() { var url = this.location.pathname; var filename = url.substring(url.lastIndexOf('/')+1); $('a[href="' + filename + '"]').parent().addClass('active'); }); </script> 

Вы можете решить это с помощью CSS.

Добавьте класс в тело каждой страницы:

 <body class="home"> 

Или, если вы находитесь на странице контактов:

 <body class="contact"> 

Затем учитывайте это, когда вы создаете свои стили:

 ul li:hover, body.home a.home, body.contact a.contact { background-color: #000; } ul li:hover a, body.home li.home a, body.contact li.contact a { color: #fff; } 

Наконец, применяйте имена классов к своим элементам списка:

 <ul> <li class="home"><a href="index.php">Home</a></li> <li class="contact"><a href="contact.php">Contact Us</a></li> <li class="about"><a href="about.php">About Us</a></li> </ul> 

Эта точка, всякий раз, когда вы находитесь на главной странице body.home, ваша ссылка li.home будет иметь стиль по умолчанию, указывающий, что это текущая страница.

Если вы присвойте $ pageTitle имя страницы, вы можете сделать это без javascript

 <ul class="nav navbar-nav"> <li <?php if ($pageTitle == "Website Development") {echo 'class="active"';} ?>> <a href="website-development.php"> Web Development </a> </li>...</ul> 

Просто поставьте приведенный ниже код в раздел «head».

 <script type="text/javascript"> $(document).ready(function () { $("li a[href='" + location.href.substring(location.href.lastIndexOf("/") + 1, 255) + "']").addClass("active"); }); </script> 

очевидно, не забывайте о своем обращении к jquery.js раньше.

И ваш:

 <style> .active{something...} </style> - <style> .active{something...} </style>