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

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

本文关键字：URL 工作 不允许 tab data-toggle or pills      更新时间：2023-09-26

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

我正在创建一个带有导航栏的网站，其中包含网站每个部分的不同页面：主页.html，关于我们.html...

我实现了导航栏，

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

现在，我创建了另一个站点（Navbar.html）并将其添加到其他页面中，看起来不错：

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

和身体内部：

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

尝试自动化"活动"类时出现问题。为此，我尝试了数据切换='选项卡'和数据切换='药丸'，但在这两种情况下，活动都发生了变化，但是当单击按钮时，网站没有改变。有代码：

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

无论如何我都可以做到，或者另一种方法可以自动化每个页面中的"活动"类？

谢谢你的时间

这应该给你你想要的： 

$(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;
  });
});
相关文章：