data-toggle='tab' или ='pills' не позволяет работать URL

Question

Прежде всего, я хотел сказать, что я много читал об этом в Интернете, и во всех найденных решениях я не мог их правильно реализовать, некоторые исправили некоторые проблемы, но создали другие. Другое дело, что я не могу комментировать другие посты из-за низкой репутации (нуб), если бы я мог это сделать, я бы не стал публиковать новый вопрос.

Я создаю веб-сайт с навигационной панелью с различными страницами для каждой части сайта: Home.html, AboutUs.html...

Я реализовал панель навигации, но я думаю, что это не очень хорошее решение вставлять один и тот же код панели навигации на каждую страницу, поэтому я искал способ ее оптимизации.

Сейчас я создал другой сайт (Navbar.html) и добавил его на другие страницы, и он выглядит хорошо:

<script>
    $(function(){
        $("#navbar").load("Navbar.html");
    });
</script>

и внутри тела:

<div id="navbar"></div>

Проблема возникла при попытке автоматизировать "активный" класс. Для этого я попробовал и data-toggle='tab', и data-toggle='pill', но в обоих случаях активная версия изменилась, но при нажатии кнопки веб-сайт не изменился. Есть код:

<ul class="nav navbar-nav" >
    <li class="menuText"><a href="Home.html" data-toggle="tab" >Home</a></li>
    <li class="menuText"><a href="AboutUs.html" data-toggle="tab" >About Us</a></li>
    <li class="menuText"><a href="Donate.html" data-toggle="tab" >Donate</a></li>
    <li class="menuText"><a href="Volunteer.html" data-toggle="tab" >Volunteer</a></li>
    <li class="menuText"><a href="Contact.html" data-toggle="tab" >Contact</a></li>
</ul>

Я также попытался перенаправить его с помощью файла.js:

$('#home').load('Home.html');
$('#aboutus').load('AboutUs.html');
$('#donate').load('Donate.html');
$('#volunteer').load('Volunteer.html');
$('#contact').load('Contact.html');

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

Я также попытался добавить множество функций, найденных в Интернете, но я не знал, работают ли они. Я думаю, что я не реализовал их правильно или не в том месте. Я нуб в HTML. Я действительно не знаю, как вызвать функцию:S Пример:

    $(function(){
        var hash = window.location.hash;
        hash && $('ul.nav a[href="Home.html"]').tab('show');

        $('.nav-tabs a').click(function (e) {
            $(this).tab('show');
            var scrollmem = $('body').scrollTop();
            window.location.hash = this.hash;
            $('html,body').scrollTop(scrollmem);
        });
    });

Можно ли как-нибудь это сделать или каким-то другим способом автоматизировать "активный" класс на каждой странице?

Спасибо за ваше время

Answer 1

Это должно дать вам то, что вы хотите:

$(function() {
   var mynavbar = $("#navbar"); //cache it
   mynavbar.load("Navbar.html");
   // remove any current active if found in markup:
   mynavbar.find('ul.nav li').removeClass('active');

   var url = window.location;// get location

   // add the active class to current url detected href
   // Will work for absolute hrefs, might have to adjust for others
   mynavbar.find('ul.nav li').find('a').filter(function() {
      return (url.href.indexOf(this.href) != -1);
   }).parent().addClass('active');

  // put the click handler for the navigation in place
  mynavbar.on('click', 'ul.nav li', function() {
     var myhref = $(this).find('a').attr('href');
     // just for debug   alert("proceed to: " + myhref);
     window.location.href = myhref;
  });
});

ПРИМЕЧАНИЕ. Если вы хотите просто использовать текущую страницу, загружая содержимое в хешированную область, это не так. В этом случае вам нужно будет переделать это и изменить эту строку:

window.location.href = myhref;

Например:

$('#mycontentcontainer').load(myhref);

Если вы хотите использовать контент с вкладками и загружать контент только по клику, это тоже можно сделать (но вы сказали, что хотите перейти на НОВУЮ страницу, поэтому я этого не включил)

РЕДАКТИРОВАТЬ: ПРИМЕЧАНИЕ: Заглядывая в будущее, решение выше с load может работать не во всех случаях (медленная загрузка)... поэтому используйте это вместо: Обрабатывайте `nav только после загрузки.

function addActiveNavbar(mynavbar) {
  // remove any current active if found in markup:
  mynavbar.find('ul.nav li').removeClass('active');
  var url = window.location; // get location
  // Will work for absolute hrefs, might have to adjust for others
  mynavbar.find('ul.nav li').find('a').filter(function() {
    return (url.href.indexOf(this.href) != -1);
  }).parent().addClass('active');
}
$(function() {
  var mynavbar = $("#navbar"); //cache it
  addActiveNavbar(mynavbar);
  $.get("Navbar.html")
    .done(function(data) {
      mynavbar.html(data);
      // add the active class to current url detected href
      addActiveNavbar(mynavbar);
    });
  // put the click handler for the navigation in place
  mynavbar.on('click', 'ul.nav li', function() {
    var myhref = $(this).find('a').attr('href');
    // un-comment for debug   alert("proceed to: " + myhref);
    window.location.href = myhref;
  });
});