Каков стандартный способ сделать активную ссылку в навигационной панели 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>