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;
  });
});