选项卡链接未重新定向到右侧页面

Tab links not rederecting to the right page

本文关键字：新定 链接 选项      更新时间：2023-09-26

我正在使用引导选项卡，并为每个选项卡添加了一个URL。

所以，如果有人去 www.example.com/index.html#contact。它将他们带到正确的页面（联系页面）。问题是我有一个链接到每个选项卡的主页。当您单击主页上的"联系人"时，它应该重定向到 www.example.com/index.html#contact，但它会转到主页，即"关于我们"，甚至认为顶部的 URL 显示 www.example.com/index.html#contact 而不是 www.example.com/index.html#about。

我希望这是有道理的。这是我的代码：

主页：（当您单击图像时，它会将您带到该页面）

<div id="row1">
<a href="http://example.index.html#conference"><img src="images/About_Photo_Red.jpg" width="33%" id="about"></a>
<a href="http://example.com/index.html#conference"><img src="images/Conference_Photo_Red.jpg" width="33%" id="conference"></a>
<a href="http://example.com/index.html#sponsors"><img src="images/Sponsors_Photo_Red.jpg"width="33%" id="sponsors"></a>
</div>

制表符：

<div class="tabs" id="navtabs">
    <div class="collapse navbar-collapse">
        <ul class="nav nav-pills head-menu" id="navbar">
            <li class="active"><a href="#about" data-toggle="tab" class="scroll">About Us</a></li>
            <li><a  href="#conference" data-toggle="tab" class="scroll">Conference</a></li>
            <li><a href="#sponsors" data-toggle="tab" class="scroll">Sponsors</a></li>
            <li class="disabled"><a href="#">Gallery</a></li>
            <li><a href="#contactus" data-toggle="tab"class="scroll">Contact Us</a></li>
        </ul>
    </div>

Java脚本

$(document).ready(function() {
  // add a hash to the URL when the user clicks on a tab
  $('a[data-toggle="tab"]').on('click', function(e) {
    history.pushState(null, null, $(this).attr('href'));
  });
  // navigate to a tab when the history changes
  window.addEventListener("popstate", function(e) {
    var activeTab = $('[href=' + location.hash + ']');
    if (activeTab.length) {
      activeTab.tab('show');
    $(this).scrollTop(0);
    } else {
      $('.nav-pills a:first').tab('show');
    }
  });
});

请注意，只有在执行实际的浏览器操作时才会触发 popstate 事件;调用 history.pushState 不会触发该事件。

也就是说，如果将历史记录处理程序从事件侦听器中取出并放入独立函数中，则可以在页面加载时手动调用它（为了安全起见;有些浏览器在 pageload 上触发 popstate 事件，有些浏览器不会）和推送历史记录之后。

例：

$(document).ready(function() {
  // add a hash to the URL when the user clicks on a tab
  $('a[data-toggle="tab"]').on('click', function(e) {
    history.pushState(null, null, $(this).attr('href'));
    updateTabs();
  });
  function updateTabs() {
    var activeTab = $('[href=' + location.hash + ']');
    if (activeTab.length) {
      activeTab.tab('show');
      $(window).scrollTop(0);
    } else {
      $('.nav-pills a:first').tab('show');
    }
  }
  // navigate to a tab when the history changes
  window.addEventListener("popstate", updateTabs);
  // make sure the correct tab is set on pageload
  updateTabs();  
});
相关文章：