Bootstrap CSS Active Navigation
-
25-10-2019 - |
Вопрос
На веб -сайте Bootstrap субнав соответствует разделам и изменяет цвет фона, как вы, или прокрутите в раздел. Я хотел создать свое собственное меню без всех цветов фона и всего, однако, я изменил свой CSS, чтобы быть похожим, но когда я прокручиваю вниз или нажимаю на элемент меню, активный класс не переключается. Не уверен, что я делаю не так.
HTML:
<ul class="menu">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About Us</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
CSS:
.menu {list-style:none;}
.menu > li {float: left;}
.menu > li > a {color:#555;float: none;padding: 10px 16px 11px;display: block;}
.menu > li > a:hover {color: #F95700;}
.menu .active > a, .menu .active > a:hover {color:#F95700;}
Я проверил файлы; jquery, bootstrap.js и bootstrap.css все связаны правильно. Должен ли я добавить немного дополнительного jQuery или мне не хватает некоторых CSS, чтобы Active To Switch, например, Subnav Menu на их сайте?
Решение
Чтобы переключить класс, вам нужно выполнить какой -то JavaScript.
В jQuery:
$('.menu li a').click(function(e) {
var $this = $(this);
if (!$this.hasClass('active')) {
$this.addClass('active');
}
e.preventDefault();
});
В JavaScript:
var menu = document.querySelector('.menu');
var anchors = menu.getElementsByTagName('a');
for (var i = 0; i < anchors.length; i += 1) {
anchors[i].addEventListener('click', function() { clickHandler(anchors[i]) }, false);
}
function clickHandler(anchor) {
var hasClass = anchor.getAttribute('class');
if (hasClass !== 'active') {
anchor.setAttribute('class', 'active');
}
}
Надеюсь, это поможет.
Другие советы
Это то, с чем я оказался, так как вы должны очистить других.
$('.navbar li').click(function(e) {
$('.navbar li.active').removeClass('active');
var $this = $(this);
if (!$this.hasClass('active')) {
$this.addClass('active');
}
e.preventDefault();
});
Это мой код для обработки списка навигации по начальной загрузке в Твиттере:
$(document).ready(function () {
$('ul.nav > li').click(function (e) {
e.preventDefault();
$('ul.nav > li').removeClass('active');
$(this).addClass('active');
});
});
Я использую 2 1-линера, в зависимости от того, как структурирована моя навигация
Просто убедитесь, что ни одна из ваших ссылок не имеет активного класса для начала.
Фактические ссылки
Если ваши ссылки на NAV находятся в отдельных HTML -файлах (например, шаблон макета в Express.js, который имеет меню), вы можете сделать это:
$('ul.nav > li > a[href="' + document.location.pathname + '"]').parent().addClass('active');
хеш -ссылки
Если они хэши, сделайте это:
$('ul.nav > li > a[href="' + document.location.hash + '"]').click(function(){ $('ul.nav > li').removeClass('active'); $(this).parent().addClass('active'); });
Если вы не хотите прокручивать хеш-щелчок, верните ложь:
$('ul.nav > li > a[href="' + document.location.hash + '"]').click(function(){ $('ul.nav > li').removeClass('active'); $(this).parent().addClass('active'); return false; });
Глядя на некоторые другие ответы, если вы хотите, чтобы веб -страница прокрутилась вниз до этого раздела, когда нажимается боковое меню, вы не хотите preventDefault
.
Кроме того, вам нужно только удалить текущий активный класс и добавить новый, а не искать все LI. Вы также хотите, чтобы код ничего не делал, когда выбранная вами элемент списка уже активен - не излишне добавлять и удалить один и тот же активный класс. Наконец, вы должны поместить слушателя своего события на элемент, а не LI, так как ему легче запустить событие клика на iPhone и планшеты и т. Д. Также может использовать .delegate
Так что вам не нужно ждать мероприятия Dom Ready. Итак, в конце концов я сделаю что -то подобное (я полагаю, вы предварительно загрузили jQuery):
$('body').delegate('.menu li a', 'click', function(){
var $thisLi = $(this).parents('li:first');
var $ul = $thisLi.parents('ul:first');
if (!$thisLi.hasClass('active')){
$ul.find('li.active').removeClass('active');
$thisLi.addClass('active');
}
});
Я предлагаю этот код:
<script>
var curentFile = window.location.pathname.split("/").pop();
if (curentFile == "") curentFile = "Default.aspx";
$('ul.nav > li > a[href="' + curentFile + '"]').parent().addClass('active');
</script>
Это работает как очарование.
Я сделал что -то другое, чтобы решить это (к вашему сведению, я полный любитель HTML/CSS/JS).
Каждая из моих кнопок Navbar идет на новую страницу. Итак, в HTML каждой страницы я положил что -то подобное внизу:
<script type="text/javascript">
$(document).ready( function(){
$("#aboutButton").removeClass("active");
});
$(document).ready( function(){
$("#dashboardButton").addClass("active");
});
</script>
Это заставило меня сразу же работать.
PS Я попробовал принятый ответ, но не повезло, так как ему также нужно было бы удалить «активное» класс с кнопки Active Active, чтобы по -настоящему «переключить». Я уверен, что это возможно, но опять же, я довольно новичок в этом.
Протестировано, и это работает нормально.
$('.navbar li').click(function(e) {
$('.navbar li.active').removeClass('active');
var $this = $(this);
if (!$this.hasClass('active')) {
$this.addClass('active');
}
});
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
. . .
</ul>
У любого, кто имеет проблемы с этим с помощью JSP, следите за своими пакетами.
document.location.pathname дал мне: /packagename/index.jsp
Но мой href в моем навигаре под названием ustex.jsp
Итак, чтобы отредактировать ответ Консумера:
$(document).ready(function() {
var string = document.location.pathname.replace('/Package Name/','');
$('ul.nav > li > a[href="' + string + '"]').parent().addClass('active');
} );
Я попробовал некоторые из главных ответов выше, он работает для класса. Затем я попробовал это:
var url = window.location;
// Will only work if string in href matches with location
$('ul.nav a[href="' + url + '"]').parent().addClass('active');
// Will also work for relative and absolute hrefs
$('ul.nav a').filter(function() {
return this.href == url;
}).parent().addClass('active');
Я нашел это здесь: Bootstrap Twitter Добавить активный класс в LI
<ul class="main-menu">
<li><a href="~/Cases/Index"><i class="fa fa-font fa-fw"></i><span class="text">Audit Case</span></a></li>
<li><a href="~/Cases/Auditplan"><i class="fa fa-font fa-fw"></i><span class="text">Audit Plan</span></a></li>
<li><a href="~/Cases/Auditreport"><i class="fa fa-font fa-fw"></i><span class="text">Audit Report</span></a></li>
<li><a href="~/Cases/Company"><i class="fa fa-font fa-fw"></i><span class="text">Company Details</span></a></li>
</ul>
<script>
$(function(){
$('.main-menu li > a[href="' + document.location.pathname + '"]').parent().addClass('active').siblings().removeClass('active');
})
</script>
Добавьте к своему JavaScript:
$(".menu li").click(function(e) {
$(".menu li").removeClass("active");
$(this).addClass("active");
e.preventDefault();
});
Это становится довольно старым и сгруппировано с ответами, но я взял верхний ответ и сделал его лучше. Верхний ответ работает только в том случае, если есть один на странице. Это придерживает его для удаления активного sibling
Элементы и добавление его в тот, который вы нажали.
Я также добавил класс nav-toggle
так что это не мешает вещам, которые уже прикреплены Bootstrap JS.
$('.nav.nav-toggle li').click(function(e) {
var $this = $(this);
$this.siblings().removeClass('active');
if (!$this.hasClass('active')) {
$this.addClass('active');
}
e.preventDefault();
});