引导选项卡单击后不显示内容

Posted 2023-05-08

【中文标题】引导选项卡单击后不显示内容

【英文标题】：Bootstrap tabs not showing content after click

【发布时间】：2018-04-07 22:16:41

【问题描述】：

我似乎无法让标签在我的网站上正常工作。 http://mysocalled90sband.com/test

当页面加载时，我可以看到第一个选项卡下的内容，但是当我切换到第二个选项卡时，所有内容都消失了。在重新加载之前，切换回第一个选项卡不会显示任何内容。

此代码似乎可以在其他地方使用，所以我认为它一定是我的网站上没有正确加载的东西。 jQuery 似乎加载良好（通过 WordPress），引导 js 文件（3.3.7）也是如此。带有自定义脚本文件和各种插件的平滑滚动都在主页上使用 jQuery 好。我试过停用网站其他页面上运行的插件，但没有运气。有什么想法吗？

<ul class="nav nav-tabs nav-justified">
  <li class="active"><a data-toggle="tab" href="#menu1">Menu 1</a></li>
  <li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
</ul>

<div class="tab-content">
  <div id="menu1" class="tab-pane fade in active">
    <h3>Menu 1</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </div>
  <div id="menu2" class="tab-pane fade">
    <h3>Menu 2</h3>
    <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  </div>
</div>

【问题讨论】：

对我有用吗？ ....

@Tomm 你是说mysocalled90sband.com/test 上的标签对你有用吗？

是的，一切正常

@Tomm 我没有看到它们在建筑物中的任何机器上工作......您实际上看到的是菜单 1 和菜单 2 下显示的 Lorem ipsum 内容？

哦，不，我只看到在菜单 1 下，你的问题是有点不清楚网站上除菜单 2 之外的所有内容

【参考方案1】：

@RajanBeipuri 引导我找到解决方案。谢谢。

我有一个自定义脚本，允许在主页的主导航上平滑滚动。

function scrollNav() 
  $('.nav a').click(function()  
    //Toggle Class
    $(".active").removeClass("active");      
    $(this).closest('li').addClass("active");
    var theClass = $(this).attr("class");
    $('.'+theClass).parent('li').addClass('active');
    //Animate
    $('html, body').stop().animate(
        scrollTop: $( $(this).attr('href') ).offset().top - 115
    , 1000);
    return false;
  );
  $('.scrollTop a').scrollTop();

scrollNav();

此脚本干扰了选项卡，因为它们也在导航类中。解决方案是在我的网站主导航中添加一个类，并相应地调整上述脚本。