Скрипт active для меню / Скрипты / Сниппеты Bootstrap

Каталог: Сниппеты Bootstrap

Категория: Скрипты

Для Bootstrap: 3, 4

Для CMS: HTML, Drupal, Joomla, uCoz, WordPress, Magento, OpenCart, PrestaShop

Язык: Русский

Уникальный ID: 1958

Количество символов:

Посмотрели: 3139 раз

Помощь: установка & настройка

Прокомментировали: 0 раз

Рейтинг: 4.8 / 5 - 8 голосов

Тип лицензии: CC BY 4.0

Авторство: Посмотреть

Информация: Пользователям

Информация: Правообладателям

Теги: Скрипт, Script, Snippet, html, Active, сниппет, Bootstrap

Поделился: BootstrapТема

Добавлено: 2017-04-12 в 14:19

Метка: 1491995947

⇄ ⇅

<nav class="navbar navbar-default">
 <div class="container-fluid">
 <div class="navbar-header">
 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
 <span class="sr-only">Toggle navigation</span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 </button>
 <a class="navbar-brand" href="#">ACTIVE</a>
 </div>
 <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
 <ul class="nav navbar-nav">
 <li><a href="#">Первый пункт</a></li>
 <li><a href="#">Второй пункт</a></li>
 <li><a href="#">Третий пункт</a></li>
 </ul>
 <ul class="nav navbar-nav navbar-right">
 <li><a href="#">Четвёртый пункт</a></li>
 </ul>
 </div>
 </div>
</nav>

<div class="container"><div class="row"><div class="col-xs-12">
<h2 class="text-center">Скрипт для активности ссылок</h2>
<pre><code>
&lt;script&gt;
$(function() {
 var url = window.location.href.substr( window.location.href.lastIndexOf( '/' ) + 1 );
 $( '.navbar-nav a' ).each( function () {
 if( $( this ).attr( 'href' ) === url || $( this ).attr( 'href' ) === '' ) {
 $( this ).parent( 'li' ).addClass( 'active' );
 }
 });
});
&lt;/script&gt;
</code></pre>
</div></div></div>

BootstrapTema

Скрипт active для меню

Скриншот

Подробнее

Похожие материалы

Просмотренные материалы

Всего комментариев: 0