"data-toggle='tab'或='pills'不允许URL工作"

Question

首先，我想说我在网上阅读了很多与此相关的内容，但找到的所有解决方案都无法正确实施，有些修复了一些问题，但又产生了其他问题。另外一件事是，由于声望低（noob），我无法评论其他帖子，如果可以的话，我不会发布新问题。

我正在创建一个带有导航栏的网站，每个部分都有不同的页面：Home.html、AboutUs.html 等等。

我实现了导航栏，但我认为将相同的导航栏代码粘贴到每个页面中并不是一个好的解决方法，因此我寻找一种优化它的方式。

目前，我创建了另一个站点（Navbar.html）并将其添加到其他页面中，看起来很好：

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

在页面主体内：

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

当尝试自动化“active”类时出现了问题。为此，我尝试了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);
        });
    });

有没有其他方法可以自动化每个页面中的“active”类别？

谢谢您抽出时间。

- Kikadass

---

只要努力工作，就能为自己赢得声誉。你可以在今天立即开始，只需详细填写个人资料。:) 找到另一个你感兴趣的StackOverflow网站，在那里注册：在这里找到一个：http://stackexchange.com/sites 然后回答一些问题（选择一些你觉得自己能回答的简单问题；或者你知道一些关于困难问题的东西）。做这些事情，你将拥有足够的声誉来发布评论。 - Mark Schultheiss

只是为了明确一下：您希望导航到一个新页面（顺便说一下，这些都不是“站点”），还是想用新页面内容替换内容部分？ - Mark Schultheiss

我想要跳转到一个新页面 :) - Kikadass

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

如果您想使用选项卡内容并仅在单击时加载内容，也可以实现（但您说您想导航到新页面，因此我没有包括它）

编辑：注意：向前看，上面的解决方案可能不适用于所有情况（加载慢）...所以请改用以下方法：仅在加载后处理“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;
  });
});

- Mark Schultheiss

---

谢谢。抱歉我是个新手，那么：我应该把这个函数放在哪里？在navbar.html中作为头部内的脚本吗？如果是这样，它会自动工作还是我需要以某种方式调用它？ - Kikadass

非常感谢！！！最后一件事是，当我更改页面时，会打开一个窗口，显示页面将要更改。这对用户有好处吗（我应该保留它），还是可以去掉？我该如何感谢你？有没有什么方式可以给你声望积分或其他东西？ - Kikadass

请注意，我真的不是为了声望/分数而这样做，任何这样做的人都是出于错误的原因来到这里的。我只是利用那个声望来获得更好的答案，并使用它赋予的特权。 - Mark Schultheiss

我已经修复了href问题，它使用的是window.location而不是window.location.href，它需要一个字符串（href）而不是位置对象。https://developer.mozilla.org/en-US/docs/Web/API/Location 我还调整了任何“当前”导航栏的突出显示，但这将被.get替换，并且可能没有任何有用的作用。我通过将代码移动到一个更好的函数并在文档准备就绪时调用它来完成这个操作... 注意：请使用第二个代码集。 - Mark Schultheiss

我设置了一个模拟的获取程序，使用延迟来测试最新版本：https://jsfiddle.net/MarkSchultheiss/301oy70u/1/ - Mark Schultheiss