data-toggle='tab' or ='pills' 不允许 url 工作

Question

首先我想说的是，我已经在网上阅读了很多关于它的信息，发现所有解决方案都无法正确实施，有些修复了一些问题，但又造成了其他问题。另一件事是，由于声誉低下（菜鸟），我无法对其他帖子发表评论，如果我可以的话，我就不会发布新问题了。

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

我实现了导航栏，但我认为在每个页面中粘贴相同的导航栏代码不是一个好的解决方案，所以我寻找一种优化它的方法。

现在我创建了另一个网站 (Navbar.html) 并将其添加到其他页面中，看起来不错:

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

和体内：

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

尝试自动化 "active" class 时出现问题。为此，我尝试了 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" class 自动化吗？

感谢您的宝贵时间

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

data-toggle='tab' or ='pills' 不允许 url 工作

data-toggle='tab' or ='pills' not allowing the url to work

html

javascript

tabs

twitter-bootstrap

nav-pills