it-swarm.com.ru

Bootstrap CSS Активная навигация

На веб-сайте 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, чтобы активировать переключение, например, меню subnav на их сайте?

43
user1029779

Чтобы переключить класс, вам нужно выполнить 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');
  }
}

Надеюсь, это поможет.

34
Nick Beranek

Это то, что я закончил, так как вы должны очистить и остальных.

$('.navbar li').click(function(e) {
    $('.navbar li.active').removeClass('active');
    var $this = $(this);
    if (!$this.hasClass('active')) {
        $this.addClass('active');
    }
    e.preventDefault();
});
48
David

это мой код для работы со списком начальной загрузки Twitter:

$(document).ready(function () {
        $('ul.nav > li').click(function (e) {
            e.preventDefault();
            $('ul.nav > li').removeClass('active');
            $(this).addClass('active');                
        });            
    });
20
hbinduni

Я использую 2 1-лайнера, в зависимости от того, как структурирована моя навигация

Просто убедитесь, что ни одна из ваших ссылок не имеет активного класса для запуска.

актуальные ссылки

Если ваши навигационные ссылки находятся в отдельных файлах 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'); });

Если вы не хотите прокручивать хеш-клик, верните false:

 $('ul.nav > li > a[href="' + document.location.hash + '"]').click(function(){  $('ul.nav > li').removeClass('active'); $(this).parent().addClass('active'); return false; });
17
konsumer

Рассматривая некоторые другие ответы, если вы хотите, чтобы веб-страница прокручивалась до этого раздела при щелчке по боковому меню, вы не хотите preventDefault.

Кроме того, вам нужно только удалить текущий активный класс и добавить новый, не ища во всех библиотеках. Вы также хотите, чтобы код ничего не делал, когда выбранный элемент списка уже активен, а не добавляет и удаляет тот же активный класс без необходимости. Наконец, вы должны поместить прослушиватель событий в элемент a, а не в li, так как он легче запускает событие нажатия на iPhone и планшете и т.д. Также можно использовать .delegate, чтобы вам не приходилось ждать события готовности DOM. Итак, в конце я бы сделал что-то вроде этого (я предполагаю, что вы предварительно загрузили 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');
    }
});
8
Mauvis Ledford

Я предлагаю этот код:

 <script>
      var curentFile = window.location.pathname.split("/").pop();
      if (curentFile == "") curentFile = "Default.aspx";
      $('ul.nav > li > a[href="' + curentFile + '"]').parent().addClass('active');
 </script>

Это работа, как шарм.

5
ali mahmoodi

Я сделал что-то другое, чтобы решить эту проблему (FYI, я полный любитель HTML/CSS/JS). 

Каждая из моих кнопок навигационной панели переходит на новую страницу. Итак, в HTML каждой страницы я поместил что-то вроде этого внизу:

<script type="text/javascript">
    $(document).ready( function(){
       $("#aboutButton").removeClass("active");
    });

    $(document).ready( function(){
       $("#dashboardButton").addClass("active");
    });
</script>

Это сразу сработало для меня.

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

3
csturtz

Проверено и работает нормально.

    $('.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>
3
Marios Nikolaou

если у вас есть проблемы с использованием jsp, посмотрите ваши пакеты.

document.location.pathname дал мне: /packagename/index.jsp

но мой href в моем navbar называется просто index.jsp

Таким образом, чтобы отредактировать ответ консумера:

$(document).ready(function() {
   var string = document.location.pathname.replace('/Package Name/','');
   $('ul.nav > li > a[href="' + string + '"]').parent().addClass('active');
} );
2
FredoAF

Я попробовал некоторые из лучших ответов выше, он работает для класса ".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');

Я нашел это здесь: Twitter Bootstrap добавить активный класс в li

1
whyisyoung
<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>
1
Luke Bhangyi

Добавьте к вашему JavaScript:

$(".menu li").click(function(e) {
    $(".menu li").removeClass("active");
    $(this).addClass("active");
    e.preventDefault();
});
0
Peter Tseng

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

Я также добавил класс nav-toggle, чтобы он не мешал вещам, к которым уже присоединен загрузчик js.

$('.nav.nav-toggle li').click(function(e) {
  var $this = $(this);
  $this.siblings().removeClass('active');
  if (!$this.hasClass('active')) {
      $this.addClass('active');
  }
  e.preventDefault();
});
0
Tom Prats