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

Какой стандартный способ сделать активную ссылку в навигационной панели Bootstrap Twitter выделен жирным шрифтом? Ясно, что ссылка получает активный вид, получая "активный" класс. Например, ссылка 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>

Ответы

Ответ 1

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

Сначала вам нужно определить, какой 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 simple должна сравнивать прошедший в запросе uri, и если он соответствует текущей отображаемой странице output active class

<?php 

function echoActiveClassIfRequestMatches($requestUri)
{
    $current_file_name = basename($_SERVER['REQUEST_URI'], ".php");

    if ($current_file_name == $requestUri)
        echo 'class="active"';
}

?>

Ответ 2

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

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

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

Ответ 3

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

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

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

Ответ 4

Вы можете попробовать:

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

Лучше всего указать атрибут nav a 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;
}

Ответ 5

Chris 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" );

Спасибо U!!

Ответ 6

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

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

Ответ 7

Вы можете решить это с помощью 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 будет иметь стиль по умолчанию, указывающий, что это текущая страница.

Ответ 8

Если вы назначаете $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>

Ответ 9

Просто поставьте приведенный ниже код в раздел "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>